Replace the Broken Images with a Default Image with JavaScript

July 1, 2010javascript, micro tutorial, web developmentComputing, http, Internet Explorer, javascript, JavaScript programming language, World Wide WebStoimen

There is cool JavaScript trick that helps you catch broken images. You know that when the image doesn’t exist, the http path to the image returns 404 or the path is wrong, the browser doesn’t display nothing in the most cases. As MSIE is always different it displays an ugly icon saying that there is not an image to load

and that is really bad!

There’s a Quick Fix …

Simply add an onerror handler on the IMG tag

<img src="http://..../broken_url.jpg" onerror="this.src='path_to_default_image'" />

7 thoughts on “Replace the Broken Images with a Default Image with JavaScript”

Ryan says:

October 16, 2012 at 9:11 am

This. Is. Perfect.

Thanks!
Lukas Frimer Tholander says:

September 6, 2013 at 4:40 pm

That was just what I needed 🙂 Thanks!
Deepak says:

December 10, 2015 at 8:49 am

Thanks a lot…….
Ola says:

July 7, 2016 at 10:51 pm

Thanks a lot. This really help.
aziz says:

September 16, 2016 at 3:14 am

is there any sample code. sholud we need to write like this
Sandhya says:

April 14, 2017 at 2:03 pm

It is not at all working.

Here is my code
ken says:

December 22, 2017 at 9:44 am

Thanks a lot.This is great solustion!谢谢!