How To HQ

How To Do Almost Anything

You are here: Home / Website Development / A Fix for Missing or Broken Images
Previous article: Thunderbird Tutorial – Using Spam and Junk Mail Filters
Next article: Creating an E-Mail Signature in Thunderbird

A Fix for Missing or Broken Images

September 15, 2007 by Doogie - 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 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.

small 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>

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”
  • Home

Categories

  • Automotive
  • Cooking
  • Energy
  • FileZilla Tutorials
  • Financial
  • Health
  • Home Electronics
  • Home Improvement
  • Internet
  • Kindle Tips
  • Miscellaneous
  • Outdoor Sports
  • Personal Computers
  • Pets
  • Security
  • Small Business
  • Thunderbird Tutorials
  • Website Development
  • WordPress
  • Yard & Garden
Content and images are copyrighted by HowToHQ.com and others
Content is intended for personal use only and may not be published or distributed on other websites

Copyright © 2006 - 2023 by HowToHQ.com - All Rights Reserved


Privacy Policy :: Terms of Use