Javascript 如果找不到源图像，如何显示替代图像？(onerror 在 IE 中工作但在 mozilla 中无效)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3984287/
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 show alternate image if source image is not found? (onerror working in IE but not in mozilla)
提问by Jyoti
I need to show an alternate image in cell of table if source image is not found. Currently below code is used to do so.
如果找不到源图像，我需要在表格的单元格中显示替代图像。目前使用下面的代码来做到这一点。
cell.innerHTML="<img height=40 width=40 src='<%=request.getContextPath()%>/writeImage.htm' onError='ImgErrorVideo(this);'>"
function ImgErrorVideo(source){
source.src = "video.png";
source.onerror = "";
return true;
}
Now the problem is that the above is solution is working in Internet Explorer but not in mozilla.
现在的问题是上述解决方案在 Internet Explorer 中有效，但在 mozilla 中无效。
Please tell me some solution which works in all browsers.
请告诉我一些适用于所有浏览器的解决方案。
回答by Etdashou
I think this is very nice and short
我认为这是非常好的和简短的
<img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" />
But, be careful. The user's browser will be stuck in an endless loop if the onerror image itself generates an error.
不过要小心。如果 onerror 图像本身产生错误，用户的浏览器将陷入无限循环。
EDITTo avoid endless loop, remove the onerrorfrom it at once.
编辑为避免无限循环，请立即onerror从中删除。
<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />
By calling this.onerror=nullit will remove the onerror then try to get the alternate image.
通过调用this.onerror=null它将删除 onerror 然后尝试获取备用图像。
NEWI would like to add a jQuery way, if this can help anyone.
新我想添加一个 jQuery 方式，如果这可以帮助任何人。
<script>
$(document).ready(function()
{
$(".backup_picture").on("error", function(){
$(this).attr('src', './images/nopicture.png');
});
});
</script>
<img class='backup_picture' src='./images/nonexistent_image_file.png' />
You simply need to add class='backup_picture' to any img tag that you want a backup picture to load if it tries to show a bad image.
您只需将 class='backup_picture' 添加到您希望备份图片加载的任何 img 标签（如果它尝试显示不良图像）。
回答by Jyoti
I have got the solution for my query:
我有我的查询的解决方案：
i have done something like this:
我做了这样的事情：
cell.innerHTML="<img height=40 width=40 alt='' src='<%=request.getContextPath()%>/writeImage.htm?' onerror='onImgError(this);' onLoad='setDefaultImage(this);'>"
function setDefaultImage(source){
var badImg = new Image();
badImg.src = "video.png";
var cpyImg = new Image();
cpyImg.src = source.src;
if(!cpyImg.width)
{
source.src = badImg.src;
}
}
function onImgError(source){
source.src = "video.png";
source.onerror = "";
return true;
}
This way it's working in all browsers.
这样它就可以在所有浏览器中工作。
回答by Ben
If you're open to a PHP solution:
如果您愿意接受 PHP 解决方案：
<td><img src='<?PHP
$path1 = "path/to/your/image.jpg";
$path2 = "alternate/path/to/another/image.jpg";
echo file_exists($path1) ? $path1 : $path2;
?>' alt='' />
</td>
////EDIT OK, here's a JS version:
////EDIT OK，这是一个JS版本：
<table><tr>
<td><img src='' id='myImage' /></td>
</tr></table>
<script type='text/javascript'>
document.getElementById('myImage').src = "newImage.png";
document.getElementById('myImage').onload = function() {
alert("done");
}
document.getElementById('myImage').onerror = function() {
alert("Inserting alternate");
document.getElementById('myImage').src = "alternate.png";
}
</script>
