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.

Please tell me some solution which works in all browsers.

5

3 Answers

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.

11

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>

1