Check if a image exists with a given URL - JavaScript

Question

I'm trying to check if an image exists given a url using javascript, but my code is not working. Thanks!

Here's my function :

function verifyImageURL(url, callBack) {
  var img = new Image();
  img.src = url;
  img.onload = function () {
        callBack(true);
  };
  img.onerror = function () {
        callBack(false);
  };
}

And Here's how I call it:

var url = "http://greenstyle.com.br/wp-content/uploads/2012/09/Tucano-imagem-Silvia-Kochen-Wordpress.jpg";
verifyImageURL(url, function (imageExists) {
        if (imageExists === true) {
            alert("Image Exists");
        } else {
            alert("Image does not Exist");
        }
    });

What do you mean by it's not working? Do you get any errors? Does it always return true or false? — XCS
– XCS, Commented Nov 6, 2015 at 16:55
What's not working? what happens? Are there any console errors? - try asking a question other than saying 'my code doesn't work' — Adjit
– Adjit, Commented Nov 6, 2015 at 16:55
I want to call another function that creates an image on a table, where i have the alert, and it doesn't go to my function — sergiogomesdev
– sergiogomesdev, Commented Nov 6, 2015 at 17:00
@sergiogomesdev please show us this code, your function does work. There must be a logic problem with the asynchronous call. — Kaiido
– Kaiido, Commented Nov 6, 2015 at 17:04

Devmyselz · Accepted Answer · 2022-07-23 03:47:00Z

0

Try this approach

var x = new XMLHttpRequest(); x.open("get", url, true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

answered Jul 23, 2022 at 3:47

Devmyselz

4585 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsejcksn · Accepted Answer · 2022-07-23 12:04:56Z

This question hasn't had activity in a long time, but since I saw another recent answer, I thought I would share a solution which fits the asker's example pattern of using a callback, but alternatively returns a promise if no callback argument is provided:

See code in the TypeScript Playground to view types and the overloaded function signature

function loadImage (url, timeoutOrCallback, maybeCallback) {
  let timeout;
  let callback;

  if (typeof timeoutOrCallback === 'number') {
    timeout = timeoutOrCallback;
    if (typeof maybeCallback === 'function') callback = maybeCallback;
  }
  else if (typeof timeoutOrCallback === 'function') callback = timeoutOrCallback;

  const promise = callback
    ? undefined
    : new Promise(resolve => void (callback = resolve));

  const onlyRunOnce = {once: true};
  let timerId = 0;
  let done = false;

  if (typeof timeout === 'number') {
    timerId = setTimeout(() => {
      done = true;
      callback(false);
    }, timeout);
  }

  const img = new Image();

  img.addEventListener('load', () => {
    if (done) return;
    clearTimeout(timerId);
    done = true;
    callback(true);
  }, onlyRunOnce);

  img.addEventListener('error', () => {
    if (done) return;
    clearTimeout(timerId);
    done = true;
    callback(false);
  }, onlyRunOnce);

  img.src = url;
  return promise;
}


// Usage examples:

function asyncExample (url, logId) {
  const timeout = 3e3; // 3s

  loadImage(url, timeout).then(imageLoaded => {
    console.log(`${logId}: async with timeout:`, imageLoaded)
  });

  loadImage(url).then(imageLoaded => {
    console.log(`${logId}: async:`, imageLoaded)
  });
}

function callbackExample (url, logId) {
  const timeout = 3e3; // 3s

  let cb = imageLoaded => console.log(`${logId}: callback with timeout:`, imageLoaded);
  loadImage(url, timeout, cb);
  
  cb = imageLoaded => console.log(`${logId}: callback:`, imageLoaded);
  loadImage(url, cb);
}

let url = 'https://i.sstatic.net/TxzmG.jpg';
asyncExample(url, 'SO image');
callbackExample(url, 'SO image');

url = 'https://invalid.example/image.jpg';
asyncExample(url, 'invalid image');
callbackExample(url, 'invalid image');

Collectives™ on Stack Overflow

Check if a image exists with a given URL - JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related