If an image doesn't exist, or somehow an image just doesn't load, is there a way to make it so this message doesn't show up in the web inspector?

Failed to load resource: the server responded with a status of 403 (Forbidden)

I have tried these:

<img src="/path.png" onerror="this.src = '/missing.png'; this.onerror = ''; return true;"/>
<img src="/path.png" onerror="this.src = '/missing.png'; this.onerror = ''; return false;"/>

And I've tried it in jQuery:

$(document).ready(function() { 
  $("img").error(function(event) {
    $(this).attr("src", "/missing.png");
    return false;
  }
});

That message gets output in red before any of these event handlers get access to it, is there not a way to prevent this message from showing up?

Ideally, I would be able to do this:

$("img").live("error", function() { $(this).attr("src", "/missing.png"); });

so I don't have to:

1. Write inline javascript like <img onerror='x'/>
2. and it would work on dynamically loaded images.

If an image doesn't exist, or somehow an image just doesn't load, is there a way to make it so this message doesn't show up in the web inspector?

Failed to load resource: the server responded with a status of 403 (Forbidden)

I have tried these:

<img src="/path.png" onerror="this.src = '/missing.png'; this.onerror = ''; return true;"/>
<img src="/path.png" onerror="this.src = '/missing.png'; this.onerror = ''; return false;"/>

And I've tried it in jQuery:

$(document).ready(function() { 
  $("img").error(function(event) {
    $(this).attr("src", "/missing.png");
    return false;
  }
});

That message gets output in red before any of these event handlers get access to it, is there not a way to prevent this message from showing up?

Ideally, I would be able to do this:

$("img").live("error", function() { $(this).attr("src", "/missing.png"); });

so I don't have to:

1. Write inline javascript like <img onerror='x'/>
2. and it would work on dynamically loaded images.

• javascript
• html
• error-handling

• it's telling me there's an error that I don't consider an error. it makes the app look broken. – Lance Pollard Commented Jul 1, 2011 at 19:56
• Well, it is an error. Also: users don't check their Web Inspector. Can't you, as the developer, simply ignore the error? – thirtydot Commented Jul 1, 2011 at 19:59
• @viatropos: Whether you consider it an error or not is not relevant. It is an error; fix it. – Lightness Races in Orbit Commented Jul 1, 2011 at 20:25

1 Answer 1

Unfortunately you would need to check for the existence of the image prior to adding the <img> to the DOM. This check would have to occur server-side as far as I know; even attempting to do this with JQuery/AJAX will still result in a 404 or 403 error appearing in the console.