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


当前回答

我认为仅仅使用HTML是不可能的。然而,使用javascript,这应该是可行的。基本上我们循环每个图像,测试它是否完整,如果它的naturalWidth为零,那么这意味着它没有找到。代码如下:

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

像这样使用它:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

在Chrome和Firefox中测试

其他回答

我认为仅仅使用HTML是不可能的。然而,使用javascript,这应该是可行的。基本上我们循环每个图像,测试它是否完整,如果它的naturalWidth为零,那么这意味着它没有找到。代码如下:

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

像这样使用它:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

在Chrome和Firefox中测试

使用Jquery,你可以这样做:

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

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

简单利落的解决方案,包括一些好的答案和评论。

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

它甚至解决了无限循环风险。

为我工作。

没有办法确定无数的客户端(浏览器)将试图查看您的页面。需要考虑的一个方面是,电子邮件客户端实际上是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属性