I'm adding images to an HTML5 canvas using Javascript:

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

And then loadCallBack draws the image.

The problem is that sometimes the image_url refers to a broken or nonexistent image. When this happens, I get a 404 error in the console and the image on the canvas stays white. Instead, I'd like to be able to replace the image's src attribute with another image_url.

I tried the following and it did not work:

img.addEventListener("error", function(){console.log("404");});

How can I detect the 404s of the images?

Note: I'm still looking for a solution, as neither of the two posted so far has worked.

I'm adding images to an HTML5 canvas using Javascript:

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

And then loadCallBack draws the image.

The problem is that sometimes the image_url refers to a broken or nonexistent image. When this happens, I get a 404 error in the console and the image on the canvas stays white. Instead, I'd like to be able to replace the image's src attribute with another image_url.

I tried the following and it did not work:

img.addEventListener("error", function(){console.log("404");});

How can I detect the 404s of the images?

Note: I'm still looking for a solution, as neither of the two posted so far has worked.

• javascript
• image
• html
• canvas

• 1 The error event seems to work (in Chrome, at least): jsfiddle.net/qgJRF – bfavaretto Commented Sep 6, 2012 at 20:05
• I've edited the title; Image() javascript class existed well before HTML5 (clarification). Since you mentioned canvas, I've left the HTML5 tag with your question. – Christian Commented Sep 6, 2012 at 20:11
• But then it sounds like this question: stackoverflow.com/questions/92720/… – LonelyWebCrawler Commented Sep 6, 2012 at 20:14

2 Answers 2

The same code as the Kostia's answer: just to compare the ugliness of jQuery and the beauty of vanilla javascript:

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​

Works in jQuery for me... http://jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function () {
      alert('error called');                                                
});
img.src = "invalid_img_name.png";​