Image error event not having desired effect

Question

I've had an issue for two days and i'm at breaking point. I would like to change the image src of an image when the image fails to load (image doesn't exist).

In the following example the first two images do exist but yet all of the image src are replaced by the error event.

https://jsfiddle.net/zq5tsbmj/

var errorHandler = function(imageParsed) {
  imageParsed.src = "http://www.theemailcompany.com/wp-content/uploads/2016/02/no-image-placeholder-big-300x200.jpg";
};

var imgs = document.getElementsByTagName("img"),
  len = imgs.length;

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = errorHandler(imgs[i]);
}

I thought this was because the event was running too quickly. So as per this question I assigned it in an event manner

https://jsfiddle.net/zq5tsbmj/1/

var errorHandler = function(imageParsed) {
  imageParsed.src = "http://www.theemailcompany.com/wp-content/uploads/2016/02/no-image-placeholder-big-300x200.jpg";
  alert('error');
};

var imgs = document.getElementsByTagName("img"),
  len = imgs.length;

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = function() {
    errorHandler(imgs[i]);
  };
}

But this doesn't trigger the error function ever, even though the last image should fail.

Could someone please explain to me what exactly i'm doing wrong. Please don't just provide links to other questions. I would really like to know in simple terms why this code isn't working exactly as expected and what the solution is, otherwise I fear I won't learn from it. Thanks.

Possible duplicate of https://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images — Rafalon, Oct 03 '17 at 06:45
@Rafalon I need to use the exact code in my example. I cannot use inline code as per your suggestion. This isn't a duplicate. — steve, Oct 03 '17 at 06:46
Then maybe this one with `$().on("error", function(){});` : https://stackoverflow.com/questions/3984287/how-to-show-alternate-image-if-source-image-is-not-found-onerror-working-in-ie — Rafalon, Oct 03 '17 at 06:50
@Rafalon thanks for the suggestion, but that doesn't work either https://jsfiddle.net/zq5tsbmj/10/ — steve, Oct 03 '17 at 06:53

gurvinder372 · Answer 1 · 2017-10-03T06:52:42.300

0

You made a mistake in both cases

Case 1

Your for-loop should be assigning the function rather than return value of the function, make it

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = errorHandler;
}

Demo

Case 2

Onerror is invoked asynchronously so, value of i must be locked before passing the same to function

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = function( i ) {
    errorHandler(imgs[i]);
  };
}

edited Oct 03 '17 at 06:52

answered Oct 03 '17 at 06:47

gurvinder372

66,980
10
72
94

thanks, i was really hoping this would work. do you have a working example? I tried it and it doesn't display the error image https://jsfiddle.net/zq5tsbmj/4/ – steve Oct 03 '17 at 06:51
The last image isn't appearing for me? Google Chrome. – steve Oct 03 '17 at 06:59
@steve last image is a valid url? it didn't invoked onerror event. – gurvinder372 Oct 03 '17 at 07:00
Sorry I didn't realise example.com would still resolve with a dummy image. If I use a url where the image doesn't exist, it still doesn't invoke the error https://jsfiddle.net/zq5tsbmj/22/ – steve Oct 03 '17 at 07:04
@steve Problem is you need to bind `onerror` event at the same time when you are attaching the `src` attribute.. try this https://jsfiddle.net/zq5tsbmj/24/ – gurvinder372 Oct 03 '17 at 09:13

score 0 · Answer 2 · answered Oct 03 '17 at 07:55

In the first case https://jsfiddle.net/zq5tsbmj/ here when we load the page itself, below code is getting executed,

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = errorHandler(imgs[i]);
}

At this point, errorHandler function is getting executed and all the images get replaced.

In the second case https://jsfiddle.net/zq5tsbmj/1/ here when we load the page itself, below code is getting executed,

for (var i = 0, lenImage = len; i < lenImage; i++) {
  imgs[i].onerror = function() {
  errorHandler(imgs[i]);
 };
}

here we are just binding the event against the images but it wont get executed.

To make it work, in all the Image tag add a event called onerror="errorHandler(this)"

<img src="http://artandcraftdays.co.uk/wp-content/uploads/2015/07/buterfly_and_drops-263x300.png" width="100" onerror="errorHandler(this)"/>
<img src="https://www.chromacolour.co.uk/media/catalog/category/art-supplies_5.jpg" width="100" onerror="errorHandler(this)"/>
<img src="https://www.exagggggmple.com/media/doesnt-exists.jpg" width="100"  onerror="errorHandler(this)"/>

and have only one function below and remove the other scripts.

var errorHandler = function(imageParsed) {
  imageParsed.src = "http://www.theemailcompany.com/wp-
content/uploads/2016/02/no-image-placeholder-big-300x200.jpg";
  alert('error');
};

And this will work as you expect.

Image error event not having desired effect

2 Answers2