Catch an Image Specific Error in Javascript

Question

Im trying to catch when an image fails loading with a specific reason, say, Denied load of "url". I tried using onerror but that fires with every error. Is there a way to specify the onerror or any other way to do it?

Answer 1

you can do it in this way

<img src="image.png" onerror="imgError(this);"/>

now you can call a function on this like,

function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;}

Answer 2

It´s not posible, but usually the problem is something like this : " Error 404 resource found " or "Failed to load resource: net::ERR_FILE_NOT_FOUND ".

But you can make ajax request with type GET and catch the error.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
function CheckImageError(img){
    var urlimg = img.attributes.src.ownerElement.currentSrc ;
    $.ajax({
     type:"GET",
     url:urlimg ,
            context: img,
     error:function(requestObject, error, errorThrown){
       // trace console.log or other action 
     },
     complete: function(){
      //do something
                 $(this).css("border","1px solid red");
     }
    })
   }  
</script>

<img onerror="CheckImageError(this)"  src="image.gif"> 

You can check xmlhttpRequest Object properties