Dirty Tricks for Dirty Problems

A while ago I needed the ability to display a "no image available" image in a list of products when an image for that product was not available on the server.

Normally, with access to a server side language, this would be easy to implement. In .NET it could be checked with a single line of code using the System.IO.File class and its static Exists method.

However, in my case, the path to the image was generated by a tool and I couldn't modify it. All I had access to was the client HTML for the image, but I always got back a full image path to the product's image, whether it existed or not. The code just assumed that there would always be an image available named after its product ID (e.g. 12345.jpg).

I could of course create "No image available" images for all the missing images, but that would have meant a lot of work. Besides, it wasn't future-proof as it was quite likely new products without images would pop up in the system.

Then I remembered a little client side trick using the onerror attribute. All I needed to do was change the src attribute of the image in its onerror handler, like this:

<img src="http://imar.spaanjaars.com/DoesNotExist.jpg"
   onerror="this.onerror=null; this.src='http://imar.spaanjaars.com/DoesExist.jpg';" /> 

When the image cannot be loaded successfully, the img element fires its onerror event. Inside the (in-line) handler for that event, a new image is loaded that does exist.

Simple, and easy to implement. Note that this solution may not work in all browsers, as it's currently not standards compliant. It looks like it's going to be added to HTML 5 though (warning: this is a huge document).

Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .

Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.

Feedback by Other Visitors of Imar.Spaanjaars.Com

On Tuesday, February 5, 2008 9:48:36 AM Sundeep said:
Hi Imar!.
I have been following this site from past 3 months. Its a great resource available on net. This technique is correct and would come handy when the image is stored in database too. When we try to retrieve data and bind to any data controls like datalist, gridview, etc, we would face the problem. To avoid it, this client side script works perfect.
On Thursday, March 20, 2008 4:19:37 PM Juriaan said:
Hele nuttige tip. Moet je 'm zelf ook ff toepassen in je Planetwrox site bij Gig Pix :-)
On Thursday, March 20, 2008 6:25:54 PM Imar Spaanjaars said:
Ha Juriaan,

Dat zou op zich een goed idee zijn, ware het niet dat dat niet overeen komt met het boek. De "broken images" komen uit het hoofdstuk waar je leert om een photo album met pictures aan te maken, maar waar je nog geen plaatjes uploadt; dat komt later pas....  ;-)


Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.