Comments on: A Fix for Missing or Broken Images

By: A simple solution for “image not available” problem « a non-geek's blog

Thu, 29 Apr 2010 09:31:32 +0000

[...] leave a comment » Is there a simple solution for problems with missing or broken images? Yes, it is. You don’t need any script, just an alternate image to display when this problem occur and the “onerror” event available with the img element. Here is an example: < img src="/path/to/image.jpg" height="100px" width="100px" onerror="this.src = '/path/to/alternate-image.png'" / > This simple solution was posted by Satya on his web scripting blog. Anyway, if you preffer a more elegant solution, you could use a script that dynamically detects the missing images and replace them with an alternate image. A good Java Script solution is presented on the tech evangelisit’s article. [...]

By: Phill

Phill — Mon, 15 Feb 2010 15:17:28 +0000

It definitely doesn’t work in Safari 4.04

By: FLASH

FLASH — Tue, 06 Oct 2009 09:53:59 +0000

I found this method, might more simple

onError=”this.src=images/no-image-100px.gif”

By: Doogie

Doogie — Wed, 08 Jul 2009 13:05:57 +0000

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.

By: Mike

Mike — Tue, 07 Jul 2009 01:26:34 +0000

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;
}

By: Online Poker Tutor

Online Poker Tutor — Thu, 23 Apr 2009 21:58:31 +0000

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

Tested in FF3, IE8 and Chrome

By: Doogie

Doogie — Mon, 20 Apr 2009 22:05:07 +0000

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.

By: diesel

diesel — Mon, 20 Apr 2009 17:39:17 +0000

It doesn’t work in Chrome….

By: Doogie

Doogie — Mon, 17 Nov 2008 01:11:48 +0000

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.

By: Mick

Mick — Sat, 15 Nov 2008 12:43:13 +0000

Its not working onerror is not a valid attribute of img tag.