how to check if an image is online

Asked

Viewed 103 times

1

I have to take an image that can be in 2 directories and to know which directory I am trying to use the function below.

The problem is that within the onerror or onload event I cannot assign any value to the imageTest object. I want to do this test without using ajax, only using javascript, but lost in what to do.

function is_img(file) {

        const imageTest = {
            status: false,
        };

        var img = document.createElement('img');

        img.src = file;


        img.onload = () => {

            imageTest.status = true;
            console.log("A imagem " + file + " existe");
        }

        img.onerror = (msg, url, lineNo, columnNo, error) => {

            imageTest.status = false;
            console.log("A imagem " + file + " não existe");

        }

        if (imageTest.status === true) {

            return true;
        } else {
            return false;
        }
    }
javascript

  • Because you do not backend the source of the file by making an ajax request?

2 answers

2


An image, as well as other web resources (audio, video, etc.) is loaded via a request. To check if they exist, or if they are available, you can make a request to url of the resource and test whether it returns without errors, thus:

function is_img(file) {
    var imagemRequest = new XMLHttpRequest();
    imagemRequest .open('HEAD', file, false);
    imagemRequest .send();

    var resultado = imagemRequest.status;

    if (resultado == 404)
       imageTest.status = false

    // testar outros códigos, como 500 e 503 por exemplo..
}

  • well noticed, removed, the idea was to show only the ifthank you ;)

  • always receive this warning and the image does not load:: from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested Resource.

1

I believe this should work:

  function isImg(file, result) {

            var img = document.createElement('img'); 
            img.src = file;
            img.onload = () => {
                result.action(true)
            }

            img.onerror = () => {
              result.action(false)
            }
        }

var file = 'teste.jpg', 
    call = {
        action:function(status) {
            if (status) {
                console.log("A imagem " + file + " existe")
            } else {
                console.log("A imagem " + file + " não existe")
            } 
    }}
    isImg(file, call);

You can do it like this:

function isImg(src, call1, call2) {
    var img = new Image();

    img.onload = call1; 
    img.onerror = call2;
    img.src = src;
}

var img = 'teste.jpg', 
isImg(img, function(status) {
   if (status) {
       console.log("A imagem " + file + " existe")
    } 
}, function(status) {
   if(status) {
      console.log("A imagem " + file + " não existe")
   } 
});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.