Here is a simple fix for problems with missing images in situations when you cannot predict when an image might be missing. Why not just fix the missing image problem? Well, sometimes a site relies on images from another source, such as those provided by affiliate marketing merchants. The fact is that there are situations where you just do not have control over the images that display on your site and broken image links make a site look unprofessional.

The issue of missing images is most problematic if you are using merchant data feeds to display product information on a web site. The fact is that merchants are not always reliable when it come to scrutinizing the images that they provide to affiliates. This fix will work for any missing image, including local images on your server and those that reside on another domain name, such as image provided by merchants. It uses JavaScript as a solution.

Place the JavaScript function in the head section of your web page or in an external JavaScript file. You will need an alternate image to display. I typically use two images: one to replace missing thumbnail images and another to replace larger product images. You can right-click on the samples below, save the images on your site and use these, or you can make your own.

The trigger that displays the image is a JavaScript event that is added to the image tag.

onerror="onImgErrorSmall(this)"

This event will run whenever an error occurs when loading the image. The event trigger then runs the associated JavaScript routine, which inserts an alternate image. The JavaScript function must be placed in the head section of a web page or in an external JavaScript file.

function onImgErrorSmall(source)
{
source.src = "/images/no-image-100px.gif";
// disable onerror to prevent endless loop
source.onerror = "";
return true;
}

When inserted in the image tag, the onerror event looks like this:

<img src="/images/19013_small.jpg" border="1" height="100"
alt="" onerror="onImgErrorSmall(this)">

As I mentioned previously, I use two different sizes for images and use two slightly different JavaScript functions to control which image displays. You can cut this block of code and paste it into the head section of a web page. All you need to add are the images and the onerr event triggers. Make sure that the path to your images is correct.

<script language="JavaScript" type="text/javascript">
function onImgErrorSmall(source)
{
source.src = "/images/no-image-100px.gif";
// disable onerror to prevent endless loop
source.onerror = "";
return true;
}

function onImgErrorLarge(source)
{
source.src = "/images/no-image-200px.gif";
// disable onerror to prevent endless loop
source.onerror = "";
return true;
}
</script>