Javascript 找不到src源图像时如何静默隐藏“找不到图像”图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3235913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to silently hide "Image not found" icon when src source image is not found
提问by systempuntoout
Do you know how to hide the classic “Image not found”icon from a rendered HTML page when an image file is not found?
您知道如何在未找到图像文件时从呈现的 HTML 页面中隐藏经典的“未找到图像”图标吗？
Any working method using JavaScript/jQuery/CSS?
任何使用 JavaScript/jQuery/CSS 的工作方法？
回答by Gary Willoughby
<img onerror='this.style.display = "none"'>
回答by Andy E
You can use the onerrorevent in JavaScript to act when an image fails to load:
您可以使用onerrorJavaScript 中的事件在图像加载失败时采取行动：
var img = document.getElementById("myImg");
img.onerror = function () {
this.style.display = "none";
}
In jQuery (since you asked):
在 jQuery 中（因为你问过）：
$("#myImg").error(function () {
$(this).hide();
});
Or for all images:
或者对于所有图像：
$("img").error(function () {
$(this).hide();
// or $(this).css({visibility:"hidden"});
});
You should use visibility: hiddeninstead of .hide()if hiding the images might change the layout. Many sites on the web use a default "no image" image instead, pointing the srcattribute to that image when the specified image location is unavailable.
如果隐藏图像可能会改变布局，您应该使用visibility: hidden代替.hide()。网络上的许多站点都使用默认的“无图像”图像，src当指定的图像位置不可用时，将属性指向该图像。
回答by Sash
I've slightly modified the solution suggested by Gary Willoughby, because it briefly shows the broken image icon. My solution:
我稍微修改了 Gary Willoughby 建议的解决方案，因为它简要地显示了损坏的图像图标。我的解决方案：
<img src="..." style="display: none" onload="this.style.display=''">
In my solution image is hidden initially and is shown only when it is successfully loaded. It has a disadvantage: users will not see halfloaded images. And if user has disabled JS then they will never see any images
在我的解决方案中，图像最初是隐藏的，只有在成功加载时才会显示。它有一个缺点：用户不会看到半载的图像。如果用户禁用了 JS 那么他们将永远看不到任何图像
回答by Q_Mlilo
To hide every image error, just add this JavaScript at the bottom of your page (just before the closing body tag):
要隐藏每个图像错误，只需在页面底部添加此 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.
}
}
})();
回答by Adway Lele
It may be little late to answer, but here is my attempt. When I faced the same issue I fixed it by using a div of the size of image & setting background-image to this div. If the image is not found, the div is rendered transparent, so its all done silently without java-script code.
现在回答可能有点晚了，但这是我的尝试。当我遇到同样的问题时，我通过使用图像大小的 div 并将背景图像设置为此 div 来修复它。如果未找到图像，则 div 将呈现为透明，因此无需 java 脚本代码即可静默完成所有操作。
回答by jAndy
Doing a quick research on Andy E's answer, its not possible to live()bind error.
对Andy E的答案进行快速研究 ，不可能live()绑定error。
// won't work (chrome 5)
$('img').live('error', function(){
$(this).css('visibility', 'hidden');
});
So you have to go like
所以你必须像
$('<img/>', {
src: 'http://www.notarget.com/fake.jpg',
error: function(e){
$(this).css('visibility', 'hidden');
}
}).appendTo(document.body);
directly binding the error event handleron creating a new element.
error event handler在创建新元素时直接绑定。
回答by Jacek G?odek
i've found a nifty method to do exactly this, while being still functional when using ng-srcdirective in Angular.js and like...
我找到了一个很好的方法来做到这一点，同时ng-src在 Angular.js 中使用指令时仍然可以正常工作，例如......
<img
ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}"
onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
/>
it's basically a shortest transparent GIF (as seen 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（如 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)
of course this gif could be kept inside some global variable so it won't mess up the templates.
当然，这个 gif 可以保存在某个全局变量中，这样它就不会弄乱模板。
<script>
window.fallbackGif = "..."
</script>
and use
并使用
<img
ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}"
onerror="this.src=fallbackGif"
/>
etc.
等等。
回答by Owais Bin Rizwan
Just Use simple css
只需使用简单的 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;
}
