Tech-Evangelist

Technical Articles, Musings and Opinions from Tech-Evangelist


A Fix for Missing or Broken Images

By - Copyright - All Rights Reserved

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.

small missing image large missing image

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>

Comments

  1. This is great! One thing though, in IE7, I am getting the following warning: Error: Object Expected. Code: 0

    Any thoughts?

  2. I assume that you are talking about a status bar message near the bottom of the IE7 window. Hmmm. I just checked it using IE6, IE7 and with FireFox using the JavaScript Error Console (one of the very best JavaScript troubleshooting tools). None displayed any error messages.

    Is the script working correctly? Make sure that you have everything named correctly (function, function call, etc) and the path to the “Image Not Available” image is correct. If you use FireFox, turn on the JavaScript Error Console by selecting it from the Tools menu. This tool will give you much more info than anything IE offers.

  4. Hi Mick

    If it is not working, then you have a coding error. I have used this on dozens of sites and never had a problem. Any JavaScript error anywhere in a page script can cause all JavaScript on the page to cease working. Use the FireFox JavaScript Error Console to pinpoint the problem.

    If you are using the W3C validator to check the code, it will give you an invalid attribute error for most JavaScript events. The W3C validator only validates HTML/XHTML. It gives the same message for any Microsoft extensions that people use in their code.

    JavaScript is not very forgiving. It is case sensitive with IE, which means every character must be exactly correct. If the code is not perfect, it will not work.

  6. It was written long before Chrome was developed. However, I just checked it in Chrome and it is working fine on my sites.

    If it isn’t working on your site, you may have a JavaScript typo or you could be running a beta copy of Chrome. Make sure that your version of Chrome is current.

  7. Works perfectly.. thanks for the script and information on how to use it.

    Tested in FF3, IE8 and Chrome

  8. Hi, I just had to make 1 little change.. removed first forward slash “/” like src=”images/ NOT src=”/images/ in java script too.

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

  9. Hi Mike

    That would be necessary if your image directory is not just level below the root directory, but is below a subdirectory containing the script being executed. However, if the images directory is off the root directory and your script is in the root directory, it should not matter.

    The reason that the script is written to be “root relative” is so that the script can be used universally throughout a site, regardless of which directory the scripts are running from.

    Whatever worked for your situation is what is important. 😀

  14. Jonathan, you are a ninja master! I struggled many hours with this, looking at other code very similar to yours. The key with your code is passing the “(source)” object (I assume it could be called anything?), clearing the onerror, and returning true. That made all the difference! Ferris Buehler, you’re my hero.