如何在JS中为图像指定两个可能的文件路径？

Question

I've done a few searches on this via Google and the Stack Overflow search bar, and nothing relevant shows up. I'm not even sure if this is possible, so let me know if it isn't. What I'm looking for is a way to set two possible file paths for an image (SVG file) for an icon, such that if the image isn't at the first file path/location, it'll try the second. I have an object like so:

this.bookmarkButtonConfig = {
    "oc-control": "BookmarkButton",
    "label": "BookmarkButton",
    "group": "primary",
    "action": "onBookmark",
    "buttonType": "toggle",
    "image": "$MODULE_PATH/images/favorite-icon.svg"
}

All of these properties are then being read by something else and configuring a button based on said properties, but that's not important for this. Is there a way that I can set the "image" so that it'll look for the icon at one file path, and then if it's not there, it'll try a second file path? Is there some sort of function or method that could do this?

Thanks for any help!

Answer 1

Yes you can using an AJAX call to check if the image exists in the server, first write this function:

function imageExists(url){
    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;
}

Then assign the url depending on the result like this:

var src = imageExists(the first url) ? "the first url" : "the second url";