When loading an image in JavaScript fails, how can you retrieve the specific error or HTTP status codes?

70 views Asked by At

I've tried this a few different ways, and while I have found several that will catch if an error has occurred when loading an image, I'm trying to figure out how to determine what, exactly, the error was. It looks like onerror returns an Event object rather than an Error object: https://www.w3schools.com/jsref/event_onerror.asp

Here's a trivial example, stripping out the Promise wrapper and other code not relevant to this question:

JSfiddle: https://jsfiddle.net/4b3n2gwp/1/

function load_image(url) {
    const img = new Image();
    img.onload = () => {
        console.log(`Image loaded:  ${img.src}`);
    }
    img.onerror = (e) => {
        console.log(`Could not load image '${img.src}':  ${JSON.stringify(e, null, 4)}`);
    }
    img.src = url
}

load_image('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');

load_image('i_do_not_exist.jpg');

It looks like the event that is returned does not contain any useful information:

"Image loaded:  https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"

"Could not load image 'https://fiddle.jshell.net/_display/i_do_not_exist.jpg':  {
    \"isTrusted\": true

In this case, since the image does not exist, the browser's console is also separately logging a GET HTTP 404 error; is there any way to get this programmatically?

0

There are 0 answers