how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
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.
EDITTo avoid endless loop, remove the onerror
from it at once.
<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />
By calling this.onerror=null
it will remove the onerror then try to get the alternate image.
NEWI would like to add a jQuery way, if this can help anyone.
<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.
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.
If you're open to a PHP solution:
<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:
<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>