如何显示在 Asp.net MVC 中找不到的图像

Question

我有一个 ASP.NET MVC 项目。在特定视图中，我将来自项目内不同文件夹的四个图像称为。

有时找不到图像。我想为每个文件夹设置一个图像，因为所有 4 个文件夹都包含不同大小的图像，所以我需要为每个文件夹设置特定大小的图像。

当图像找不到任何方法时，我如何显示默认图像。我的意思是，当目录中没有我在视图中调用的图像时，调用 none.png 。

在找不到图像的情况下他们有什么方式显示图像。

在 asp.net 4 MVC 3. 中使用 web.config 或设置其他任何内容可以实现此目的。

Answer 1

您可以使控制器操作返回 FileResult，并接受描述图像路径的 string 类型的参数。

控制器操作尝试从磁盘加载图像并将其作为 FileResult 返回，或者如果磁盘中缺少该文件，则返回占位符“未找到图像”图像。

然后，要显示图像（或其占位符），您需要将 img 元素的 src 属性设置为控制器操作，而不是直接设置图像。

Answer 2

最简单的方法是使用 html 助手。请注意在显示图像文件名之前检查文件系统会对性能造成额外影响。不过，点击量很小，因此除非流量非常高，否则您不会注意到任何问题。然后，您可以实现某种缓存，以便应用程序“知道”文件是否存在。

您可以为其使用自定义 html 帮助程序

public static class ImageHtmlHelpers
{
   public static string ImageUrlFor(this HtmlHelper helper, string contentUrl)
   {
       // Put some caching logic here if you want it to perform better
       UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
       if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(contentUrl)))
       {
           return urlHelper.Content("~/content/images/none.png");
       }
       else
       {
           return urlHelper.Content(contentUrl);
       }
   }
}

然后在您看来，您可以使用以下命令创建 url：

<img src="<% Html.ImageUrlFor("~/content/images/myfolder/myimage.jpg"); %>" />

编辑： 正如 Jim 指出的那样，我还没有真正解决大小调整问题。就我个人而言，我使用自动大小请求管理/大小，这是一个完全不同的故事，但如果您担心文件夹/大小，只需将该信息传递到构建路径即可。如下所示：

public static class ImageHtmlHelpers
{
   public static string ImageUrlFor(this HtmlHelper helper, string imageFilename, ImageSizeFolderEnum imageSizeFolder)
   {
       UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
       string contentUrl = String.Format("~/content/userimages/{0}/{1}", imageSizeFolder, imageFilename);
       if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(contentUrl)))
       {
           return urlHelper.Content(String.Format("~/content/userimages/{0}/none.png", imageSizeFolder));
       }
       else
       {
           return urlHelper.Content(contentUrl);
       }
   }
}

然后在您看来，您可以使用以下方式创建网址：

<img src="<% Html.ImageUrlFor("myimage.jpg", ImageSizeFolderEnum.Small); %>" />

如果文件夹是固定集，建议使用枚举来更好地进行编程控制，但为了一种快速而令人讨厌的方法，而不是您不能只使用字符串的原因如果该文件夹是数据库生成的等。

Answer 3

我不太了解 MVC，但我的想法仍然是：

有一个特定的控制器，它可以根据您的逻辑获取图像。就像迈克尔说的那样，在成功审核后返回一些东西（图像） - 意思是如果找到图像。如果未找到，则返回状态代码 404 或类似的内容。

通过客户端上的 javascript 处理其余部分。所以在img标签中为onerror事件写一些东西。可能会用找不到海报图像文件的图像替换 img 源。这里有一些（但不完全）如何通过 jquery 做到这一点。

$(function(){
    $('#myimg').error(function(){
        $('#result').html("image not found");
    });
});

PS：http://jsfiddle.net/Fy9SL/2/ 如果您对完整演示感兴趣jquery 代码。

Answer 4

    public static MvcHtmlString Image(this HtmlHelper helper, string src, string alt)
    {
        var builder = new TagBuilder("img");

        // Put some caching logic here if you want it to perform better
        UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
        if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(src)))
        {
            src = urlHelper.Content("~/content/images/none.png");
        }
        else
        {
            src = urlHelper.Content(src);
        }

        builder.MergeAttribute("src", src);
        builder.MergeAttribute("alt", alt);
        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }