未找到src源图像时如何隐藏“未找到图像”图标

你可以用 onerror JavaScript中的事件,以便在图像加载失败时执行操作:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

$("#myImg").error(function () { 
    $(this).hide(); 
});

或对于所有图像:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

你应该使用 visibility: hidden 而不是 .hide() 如果隐藏图像可能会改变布局。web上的许多站点使用默认的“无图像”图像,指向 src

<img onerror='this.style.display = "none"'>

    <img src="..." style="display: none" onload="this.style.display=''">

在我的解决方案中,图像最初是隐藏的,只有在成功加载时才会显示。它有一个缺点:用户不会看到半加载的图像。如果用户禁用了JS,那么他们将永远看不到任何图像

要隐藏每个图像错误,只需在页面底部添加以下JavaScript(就在结束body标记之前):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

现在回答可能有点晚,但这是我的尝试。 当我面对同样的问题时,我通过使用一个大小为image&的div来修复它;为这个div设置背景图像。如果找不到该图像,div将被呈现为透明的,因此所有操作都将在没有java脚本代码的情况下以静默方式完成。

快速研究 安迪E 的答案,这是不可能的 live() 绑定 error

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

所以你必须像

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

error event handler 关于创建新元素。

我找到了一个很好的方法来做到这一点,同时在使用 ng-src 在Angular.js中的指令。。。

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html )

当然,这个gif可以保存在一些全局变量中,这样就不会弄乱模板。

<script>
  window.fallbackGif = "..."
</script>

使用

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}