Do you find it a hassle to manage external images? One day all your images show up just fine, and the next you see the infamous red x in it’s place, signifying that the image is no longer available. Frustrating!

With this quick fix, you can say goodbye to that problem. With a quick javascript event function, you can easily replace broken images with a default image of your choosing without any crazy server-side file existence checks.

The way to accomplish this is to reset the img tags src attribute on the OnError event. This event is fired when an image cannot be loaded for whatever reason. Perfect time to replace the image with the default image!

Example:

<img src=”http://www.somedomain.com/someimage.jpg” onerror=’this.src=”/images/default.gif”‘ />

With this one JavaScript event function, you no longer have to worry about whether images will show up, and best of all, viewers of your site won’t think you are a slacker