未findsrc源图像时,如何隐藏“Image not found”图标

当图像文件没有find时,您知道如何从呈现的HTML页面隐藏经典的“图像未find”图标吗?

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

您可以在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()如果隐藏图像可能会更改布局。 Web上的许多站点都使用默认的“无图像”图像,而当指定的图像位置不可用时,将src属性指向该图像。

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

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创build一个新的元素。

回答可能有点迟,但这是我的尝试。 当我遇到同样的问题,我通过使用图像大小的div和设置背景图像到这个div来解决它。 如果图像没有find,div就会变成透明的,所以它们都是静静地完成的,没有java脚本代码。

要隐藏每个图像错误,只需在页面底部添加此JavaScript(就在closures正文标记之前):

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

我稍微修改了Gary Willoughby提出的解决scheme,因为它简要地显示了破碎的图像。 我的解决scheme

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

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

我已经find了一个漂亮的方法来做到这一点,而在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可以保存在一些全局variables中,所以不会搞乱模板。

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

并使用

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

等等