how to show alternate image if source image is not found? (onerror working in IE but not in mozilla)

Question

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.

Indent code by 4 spaces. Also, if the code above is what you have, you have an error with a missing double quote at the end of innerHTML. — some, Oct 21 '10 at 04:39
I forgot to put the double quote at the end here. The solution given in #3938383, there is one link mentioned over there in reply which is not working. — Jyoti, Oct 21 '10 at 04:52
Another tip: When you reply to someone, start the comment with @ followed by their name, and they get a message that you have replied. — some, Oct 21 '10 at 08:16
@some - when the intellisense finds and autocompletes the remaining characters in their name, it leaves the "@johntrepreneur" text in the comment, but sometimes the intellisense doesn't trigger when typing a reply comment to the user and strips it from the comment. Not sure if they get notified or not, but it's annoying and makes answers with lots of comments hard to read. Why does it only work sometimes or for some of the users??? — johntrepreneur, Jul 17 '13 at 21:55

Etdashou · Answer 1 · 2016-09-20T14:57:28.467

442

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.

EDIT To 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.

NEW I 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.

edited Sep 20 '16 at 14:57

answered Mar 27 '12 at 13:57

Etdashou

5,095
1
17
15

9

@Etashou - Chrome only triggers the `onerror` event one time unlike all other browsers. – johntrepreneur Jul 17 '13 at 21:57
not working in mozilla, getting error of wrong syntax on this.src – Oct 17 '13 at 04:57
Not Working in Firefox & other browser, What to do for the others – Anand Thakkar Jul 21 '14 at 15:09
1

For me with firefox it works well for a long time (since the post). Do you have any demo where it doesn't and where we could look at it. – Etdashou Aug 07 '14 at 13:24
jQuery method works on Chrome for multiple loads to the same img element – Greg T Feb 21 '15 at 22:45
Word of warning: I thought that since "delete this.onerror" works on IE, it would work everywhere, but it actually had no effect in Firefox which led to hundreds of thousands of 404 calls to the image server. As the OP says, "this.onerror = null" is the way to go. – Darcinon Oct 09 '15 at 16:56
6

Just letting you guys know that `$().error()` is deprecated on jQuery 1.8. Use `$().on("error", function(){});` instead – AlbertSamuel Jan 24 '16 at 22:29
Or even better `$().on('error', function () { ... });` to only attempt to load the backup image once. Otherwise if your backup image fails to load, the client browser will continue to fire the handler over and over again. – War10ck Sep 16 '16 at 19:57
2

`Chrome only triggers the onerror event one time` Not true today, it's falling to endless loop. – sab Dec 06 '16 at 21:18
@Etdashou thank you! I am using php and I have tried everything and nothing has worked until your JS. – Reed Oct 28 '18 at 03:01
Anyone have any idea if having backup images like this positively impacts SEO? – RyanQuey Jan 04 '22 at 04:54

score 4 · Answer 2 · edited Feb 14 '20 at 21:48

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.

Ben · Answer 3 · 2010-10-21T05:10:18.967

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>

Thanks for the reply. But i need to do this only by javascript. Please tell me if there is any solution for this. — Jyoti, Oct 21 '10 at 05:00

how to show alternate image if source image is not found? (onerror working in IE but not in mozilla)

3 Answers3

Linked

Related