Question

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

使用JavaScript / jQuery / CSS的任何工作方法？

Answer 1

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

Answer 2

您可以使用JavaScript中的onerror事件在图片无法加载时执行操作：

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属性指向该图像。

Answer 3

快速研究 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。

Answer 4

要隐藏每个图片错误，只需在页面底部添加此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. 
        }
    }
})();

Answer 5

回答可能有点迟，但这是我的尝试。当我遇到同样的问题时，我通过使用图像和图像大小的div来修复它。将background-image设置为此div。如果找不到图像，div将呈现为透明，因此它们都是静默完成的，没有java脚本代码。

Answer 6

我是由Gary Willoughby建议的稍微修改过的解决方案，因为它简要地显示了破碎的图像。我的解决方案：

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

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

Answer 7

我找到了一个很好的方法来完成这个，而在Angular.js中使用ng-src指令时仍然可以正常运行...

<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"
  />

等

Answer 8

只需使用简单的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;
}

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

8 个答案: