return true in nested function part of new Image() .onload to verify image exist from url?

How can I return true when function is run inside function part of new Image() .onload, in order to verify if a url is a valid image?

var valid = false;
checkImage('https://example.com/image.png')
console.log(valid) //always false at first run

function checkImage(url) {

  var image = new Image();
  image.onload = function () {
    if (this.width > 0) {
			valid = true;
    }
  }
  image.onerror = function() {
		valid = false;
  }
  image.src = url;
}

I also tried setting a global variable which doesn't work,Or any other way to return true / false back via checkImage(url) ?

Got this initial solution from https://stackoverflow.com/a/55880263/8719001

Following your code example you'll need to wrap your result in a Promise, which is an object made for "returning a result later":

function checkImage(url) {
  return new Promise((resolve, reject) => {
    var image = new Image();
    image.onload = function () {
      if (this.width > 0) {
        resolve()
      } else {
        reject()
      }
    }
    image.onerror = reject
    image.src = url;
  })
}

const valid = await checkImage('https://example.com/image.png')

Alternatively, a simpler way of doing this would be to use fetch if your only goal is to check for the file's existence (and not necessarily checking whether it works as an image):

const exists = await fetch(url, {method: 'HEAD'})
  .then(response => response.status === 200)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

(async () => {
  let valid = await checkImage('https://example.com/image.png')
  console.log(valid)
})();

async function checkImage(url) {
  return new Promise(resolve=>{
    const image = new Image()
    image.onload = () => resolve(!!image.width)
    image.onerror = () => resolve(false)
    image.src = url
  })
}

<!-- end snippet -->