Getting rid of the "Failed to load resource: the server responded with a status of 403 (Forbidden)" message when an image fails to load?

16,942

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.

Share:
16,942
Lance
Author by

Lance

I read JavaScript and am attempting to emit Assembly from it.

Updated on June 19, 2022

Comments

  • Lance
    Lance almost 2 years

    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.