How to detect broken image and replace with another?

Question

I have a page which displays lots of images from different remote servers. http://example.com/img/email_star0.png' height='150' />

Now suppose this image is not present, I get a (x) in my html. Is there anyway that I can detect that this image is not present and replace this (x) with a local image without having to check if the file exists on the remote server using Curl (or using JQuery for that matter) and thereby save time? Can this be done locally?

Thanks for your help

Answer 1

Yes this is possible using onerror event:

<img src="your_image_source" onerror="this.src='/path/to/local/file'">

If the image does not exist, instead of displaying the X, this will show the default image in your local folder