«
»

The other day I discovered that the img tag has an error event. This can be used to automatically load a fall back image when the main image fails for some reason. We encounter this in our dev sites sometimes, because the data is often not 100% correct. For example, our application may ‘think’ there is an image for a product (according to the database), so it writes out an img tag for it. But the image file does not actually exist. So we may end up with a broken image icon, or depending on the browser there may be no indication at all that something is wrong. The tester may get confused as to what’s gone wrong. So I added this code to show an ‘image file does not exist’ image:

<img src="#productImage#" onerror="this.src='/images/icons/imageDoesNotExist.png'" >

That’s it. Be careful that in your error handling code you point to an image file that really exists, otherwise you could go into an infinite loop. One way to be safe regarding that would be to call a function, and remove the onerror attribute so that it only gets fired once.

<script>
function imageError(element) {
	element.onerror='';
	element.src='/images/icons/imageDoesNotExist.png';
	}
</script>

<img src="#productImage#" onerror="imageError(this)">

You could even use this to report a broken image:

<img src="#productImage#" onerror="this.src='logBrokenImage.cfm?image=' + this.src" >

The onerror event is supported in all major browsers. The other tags that support onerror are object, script, and style.

This entry was posted on 8 January 2013 at 10:05 am and is filed under AJAX / JavaScript, CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

5 Comments

  1. Chris Tierney says:

    Excellent tip. Thanks Ryan!

    8 January 2013, 10:17 am

  2. Nathan Strutz says:

    That’s awesome. Why have I never seen that before? Thanks! I just experimented a bit with it, and it looks like you can do this more automatically with some jQuery. I don’t know how well this will print out on your blog comments, but…

    $(“img”).on(“error”, function(e){
    this.src=”imageDoesNotExist.png”;
    });

    That lets you leave off the onerror= event from your HTML elements. Thanks again, Ryan!

    8 January 2013, 10:30 am

  3. Ryan says:

    Nathan that’s neat, I’ve read that you can do it that way. But I’m still surprised it works. I would think that sometimes the error event would fire before jQuery had added the handler to those elements? But I may not be completely understanding the order of execution.

    8 January 2013, 10:34 am

  4. Dominic Watson says:

    Awesome, I had no idea, thanks for the tip. The jquery example here suggests that the src attribute of the image would need / want to be dynamically attached to the image element after attaching your error handler (so that the handler will always fire) if using .error():

    http://api.jquery.com/error/

    I couldn’t get $(‘img’).on( ‘error’, function(){…}) to fire because it was too late. jQuery suggest:

    $(‘#myimage’).error( handler ).attr( ‘src’, ‘/path/to/the/image.jpg’ );

    Which is a shame.

    8 January 2013, 1:53 pm

  5. Wayne says:

    Just read: http://jquery-howto.blogspot.de/2013/01/8-methods-that-will-not-work-in-jquery.html

    .error() added in v1.0, deprecated in v1.8. Not to be confused with $.error() method, that throws new Error(msg);

    15 January 2013, 3:56 pm