是否有任何方法在HTML <img>标记中呈现默认图像,以防src属性无效(仅使用HTML)?如果不是,你会用什么轻量级的方式来解决这个问题?


当前回答

上面的解决方案是不完整的,它错过了属性src。

这一点。src和this.attribute('src')是不一样的,第一个包含了对图像的完整引用,例如http://my.host/error.jpg,但属性只是保持原始值error.jpg

正确的解决方案

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />

其他回答

<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

请务必输入图像的尺寸,以及是否希望图像平铺。

JQuery的可模块化版本,在文件末尾添加:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

在你的img标签上:

<img src="..." data-src-error="..." />

如果你正在使用Angular/jQuery,那么这可能会有帮助……

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

解释

假设该项目有一个属性url可能为空,当它是,那么图像将显示为破碎。这将触发onerror属性表达式的执行,如上所述。你需要像上面描述的那样重写src属性,但是你需要jQuery来访问你的altSrc。无法让它与普通JavaScript一起工作。

可能看起来有点俗气,但挽救了我的项目。

没有办法确定无数的客户端(浏览器)将试图查看您的页面。需要考虑的一个方面是,电子邮件客户端实际上是web浏览器,可能无法处理这种诡计……

因此,你也应该包括一个alt/文本的默认宽度和高度,就像这样。这是一个纯HTML解决方案。

alt="NO IMAGE" width="800" height="350"

所以另一个好的答案可以修改如下:

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

我在Chrome中有对象标签的问题,但我想这也适用于此。

你可以进一步样式的alt/文本非常大…

所以我的答案是使用Javascript和一个不错的alt/text回退。

我还发现这个很有趣:如何设置图像的alt属性

在Spring in Action第三版中找到了这个解决方案。

<img src=“../资源/images/Image1.jpg”

更新: 这不是一个只有HTML的解决方案…Onerror是javascript