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 a simple image like the one below. Ideally, it’s best to have replacement images that are the same dimensions as the missing image. You can right-click on the sample below, save the image on your, 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>
If you are struggling with this code and cannot get it to work properly, check the path to your default image. The path will change depending upon where you place the images directory.
Also, you can try the following very simplified version. This may or may not work on all browsers. There is no need to set up the JavaScript functions with this version. Just replace the onError attribute in the image tag with this version of the trigger.
onError=”this.src=images/no-image-100px.gif”