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?