找不到src源图像时，如何静默隐藏“找不到图像”图标

您是否知道在找不到图像文件时如何从呈现的HTML页面中隐藏经典的“未找到图像”图标？

有使用JavaScript / jQuery / CSS的工作方法吗？

您可以使用onerrorJavaScript中的事件来在图像加载失败时采取行动：

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

在jQuery中（自您询问之后）：

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

或对于所有图像：

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

如果隐藏图像可能会更改布局，则应使用visibility: hidden代替.hide()。网络上的许多站点都使用默认的“无图像”图像，src当指定的图像位置不可用时，将属性指向该图像。

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

我已经稍微修改了Gary Willoughby建议的解决方案，因为它会短暂显示损坏的图像图标。我的解决方案：

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

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

要隐藏每个图像错误，只需在页面底部（就在body标记之前）添加以下JavaScript：

(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. 
        }
    }
})();

答案可能为时不晚，但这是我的尝试。当我遇到相同的问题时，我通过使用图像大小的div并将该背景图像设置为此div来修复它。如果未找到该图像，则div将呈现为透明，因此无需Java脚本代码即可静默完成所有操作。

快速研究 Andy 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=='"
  />

它基本上是最短的透明GIF（如 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"
  />

等等

只需使用简单的CSS

.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;
}