I have a onerror handler on the image tag to handle switching when the remote image is not found.

the problem is that for certain broken remote images, it does not work.

.jpg

<img onerror="this.src='/images/pic_not_found.png'" src=".jpg">

Image below: 1) when remote image found, 2) remote image not found (onerror not triggered) , 3) remote image not found (onerror triggered)

I have a onerror handler on the image tag to handle switching when the remote image is not found.

the problem is that for certain broken remote images, it does not work.

http://a3.twimg./profile_images/522455109/calvin-and-hobbessm_normal.jpg

<img onerror="this.src='/images/pic_not_found.png'" src="http://a3.twimg./profile_images/522455109/calvin-and-hobbessm_normal.jpg">

Image below: 1) when remote image found, 2) remote image not found (onerror not triggered) , 3) remote image not found (onerror triggered)

• javascript
• firefox
• mime-types

Share Improve this question Follow asked Oct 14, 2010 at 23:32 meowmeow 28.2k3636 gold badges121121 silver badges178178 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It is not a broken link.

The twimg. actually returns an image with the name of the url you requested.

just click your link to the image. It is not text what you are seeing, it is an image.

Update

Here is some code that works in all browsers.
It does some basic feature detection.

function handle( elem, img, state )
{
  if ((typeof(elem.onerror) === 'function' && state === 'fail') 
      || (elem.width === 0)
    )
     {
       elem.src = img;
     }
}

http://jsfiddle/VVcQj/1

It uses both onload and onerror, but requires a function defined in javascript to handle the situation.