10

我在 myasp.net MVC Web 应用程序中有以下代码:-

 <a href="~/Content/uploads/@(item.ID).png"><img class="thumbnailimag" src="~/Content/uploads/@(item.ID).png"  /></a>   @Html.ActionLink(item.Name,"Details","DataCenter", new{id = item.ID},null)

以及以下 CSS:

.thumbnailimag {
    width:30px;
    height:30px;
    border:thin blue;
    background-image:url("/Content/uploads/virtual-data-center.jpg");
}

但是,如果图像不存在,每个 Bowser 都会以不同的方式处理它。我设置了一个背景图片,但仍然在 IE 上,它会在默认图片上显示一个“X”,如下所示:- 在此处输入图像描述

如果 src 不存在,任何人都可以建议是否有办法显示默认图像?

4

3 回答 3

29

当然,对于您的图像,请使用:

<img src="fails/to/load.png" onerror="this.src='path/to/replacement/image.jpg'" />

CSS 中没有解决方案,它需要将 JS 应用于每个<img>标签或顶级处理程序来替换onerror所有图像的事件。

于 2013-11-12T14:30:04.880 回答
9

处理这个服务器端要好得多:

public static class HtmlHelperExtensions
{
    public static string ImageOrDefault(this HtmlHelper helper, string filename)
    {
        var imagePath = uploadsDirectory + filename + ".png";
        var imageSrc = File.Exists(HttpContext.Current.Server.MapPath(imagePath))
                           ? imagePath : defaultImage;

        return imageSrc;
    }

    private static string defaultImage = "/Content/DefaultImage.png";
    private static string uploadsDirectory = "/Content/uploads/";
}

然后您的视图被简化为:

<img src="@Html.ImageOrDefault(item.ID)" />
于 2013-11-12T14:45:06.660 回答
0

你可以尝试添加一些js,例如在img标签中添加一个事件监听器:

<img id="something" data-isloaded="false" onload="$(this).data('isloaded', 'true')" />

然后您可以检查是否加载了图像:

if ($('#myimage').data('isloaded') === 'false' ) {
    // not loaded, do stuff here
    // add some replacement thumbnail
    // or set background image to the parent element
}
于 2013-11-12T14:35:29.043 回答