如果源图像未find，如何显示替代图像？ （onerror在IE浏览器，但不是在Mozilla中）

如果没有find源图像，我需要在表格的单元格中显示替代图像。 目前下面的代码是用来做的。

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

现在问题是，上面的解决scheme是在Internet Explorer中，而不是在Mozilla中。

请告诉我一些适用于所有浏览器的解决scheme。

谢谢Jyoti

Answer 1

我觉得这很好，很短

 <img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" /> 

不过要小心。 如果onerror图像本身产生错误，用户的浏览器将陷入无限循环。

---

编辑为了避免无尽的循环，立即从它删除onerror 。

 <img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" /> 

通过调用this.onerror=null它将删除onerror，然后尝试获取替代图像。

---

新我想添加一个jQuery的方式，如果这可以帮助任何人。

 <script> $(document).ready(function() { $(".backup_picture").on("error", function(){ $(this).attr('src', '.http://img.dovov.comnopicture.png'); }); }); </script> <img class='backup_picture' src='.http://img.dovov.comnonexistent_image_file.png' /> 

您只需将class ='backup_picture'添加到任何想要加载备份图片的img标签，如果它试图显示一个错误的图像。

Answer 2

我有我的查询解决scheme：

我做了这样的事情：

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

这样它的工作在所有的浏览器。

谢谢Jyoti

Answer 3

如果你打开一个PHP解决scheme：

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

////编辑好了，这是一个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>