Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox "onerror" would not fire even when image is not valid

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.com/profile_images/522455109/calvin-and-hobbessm_normal.jpg

<img onerror="this.src='/images/pic_not_found.png'" src="http://a3.twimg.com/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)

alt text

like image 982
meow Avatar asked Oct 14 '10 23:10

meow


People also ask

Is IMG Onerror deprecated?

A "deprecated attribute" warning is shown when using React's onError attribute on a <img> element. But the onError props is valid in React (see the documentation). However, the HTML onerror attribute is indeed deprecated (see on MDN), but it should not be triggered in JSX code.

What is Onerror in IMG tag?

The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image). Tip: When used on audio/video media, related events that occurs when there is some kind of disturbance to the media loading process, are: onabort.

What is Onerror attribute?

The onerror attribute fires when an error occurs while loading an external file (e.g. a document or an image).

What is JavaScript Onerror?

onerror is a special browser event that fires whenever an uncaught JavaScript error has been thrown. It's one of the easiest ways to log client-side errors and report them to your servers. It's also one of the major mechanisms by which Sentry's client JavaScript integration (raven-js) works.


1 Answers

It is not a broken link.

The twimg.com 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.net/VVcQj/1

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

like image 154
Gabriele Petrioli Avatar answered Sep 21 '22 16:09

Gabriele Petrioli