2017-23 @ Fabio Franchino

Load an image with Javascript using await

Posted on October 10, 2021

Here a little script that promisize the Image load, so you can write, within an async function, something like:

const img = await loadImage(url)

And with error try-catcher:

try{
  const img = await loadImage(url)
}catch(e){
  console.log(e)
}

Here the function:

const loadImage = path => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.crossOrigin = 'Anonymous' // to avoid CORS if used with Canvas
    img.src = path
    img.onload = () => {
      resolve(img)
    }
    img.onerror = e => {
      reject(e)
    }
  })
}
export default loadImage
← Fix Firebase error on HMR with React
Prepend https to URL if necessary →