Checking if an image URL works using Javascript

Question

Basically, I need to check if the URL of an image is working so I can show it or show some placeholder image instead.

The best solution seems to make an Ajax request or something similar and do the handling from there depending of the response. The problem is that request says that it 'has been blocked by CORS', so this always returns false, so the function always show the placeholder image.

function checkImg(url){
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json'
    }).done(function (response) {
        return true
    }).fail(function(jqXHR, textStatus, errorThrown) {
        return false
    })
}

if checkImg(url){
    # do something
} else {
    # do something else
}

What annoys and confuses me the most is the fact that I can access the images directly (from this URL, for example: https://vikua.com/images_cameras_rails/521474/large/image works when clicked) but the console returns the 'blocked by CORS' error when doing a request.

Also, the image also works if I put the link directly in an HTML tag, but I can't do error handling from there, can I?

I appreciate any answers.

Edit: It turns out I actually can handle this kind of error with a bit of HTML. Using 'onerror' worked! Thanks a lot to jonatjano for the solution!

Cors blocks retrieving images unless the server has setup the approprate CORS rules, see https://stackoverflow.com/a/30026842/6803592 — Olaf, Aug 14 '19 at 14:12
Instead of that, you should go for image lazy loading. There are 100s of plugin available for it, when you look for it. — Sachin Vishwakarma, Aug 14 '19 at 14:14
Your JavaScript knowing if your visitor is able to load an image from a different origin is a privacy concern (trivial example: the image might be password protected so it would leak if the user was logged into the other site or not). So you can't do it (unless permission is granted with CORS). — Quentin, Aug 14 '19 at 14:16

jonatjano · Accepted Answer · 2019-08-14T14:21:32.523

actually there is a way to detect errors directly on the html tag

let works = document.getElementById("works")
let breaks = document.getElementById("breaks")

let placeHolderSrc = "https://www.morawealth.com/wp-content/uploads/2015/06/placeholderimg.png"

let errorHandler = e => {
  console.log(e.target.id, "couldn't load image replacing with placeholder")
  e.target.src = placeHolderSrc
}
works.onerror = errorHandler
breaks.onerror = errorHandler

img {
  width: 25%;
  height: 25%;
}

<img id="works" src="https://vikua.com/images_cameras_rails/521474/large/image">
<img id="breaks" src="https://vikua.com/images_camerails/521474/lge/ime">

you can also do it with the tag onerror attribute if you don't want to use js but it is considered bad practice

img {
  width: 25%;
  height: 25%;
}

<img id="works" src="https://vikua.com/images_cameras_rails/521474/large/image"
onerror="this.src = 'https://www.morawealth.com/wp-content/uploads/2015/06/placeholderimg.png'">
<img id="breaks" src="https://vikua.com/images_camerails/521474/lge/ime"
onerror="this.src = 'https://www.morawealth.com/wp-content/uploads/2015/06/placeholderimg.png'">

Checking if an image URL works using Javascript

1 Answers1