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

【问题标题】：How can I specify two possible file paths for an image in JS?如何在 JS 中为图像指定两个可能的文件路径？
【发布时间】：2017-07-24 15:58:35
【问题描述】：

我通过 Google 和 Stack Overflow 搜索栏对此进行了一些搜索，但没有显示任何相关内容。我什至不确定这是否可能，所以如果不是，请告诉我。我正在寻找的是一种为图标的图像（SVG文件）设置两个可能的文件路径的方法，这样如果图像不在第一个文件路径/位置，它将尝试第二个。我有一个像这样的对象：

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

所有这些属性都被其他东西读取并基于所述属性配置按钮，但这并不重要。有没有办法可以设置 "image" 以便它在一个文件路径中查找图标，然后如果它不存在，它会尝试第二个文件路径？是否有某种功能或方法可以做到这一点？

感谢您的帮助！

【问题讨论】：

看看这是否有帮助。检查图像可用性（在 this.bookmarkButtonConfig = {....} 之前）并将其路径存储在变量中。然后将该变量与您的“图像”一起使用
你有什么框架用吗？
@ChristianEsperar 我不能添加任何框架，如果这就是你的意思。

标签： javascript filepath

【解决方案1】：

是的，您可以使用 AJAX 调用来检查图像是否存在于服务器中，先写这个函数：

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

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

    return http.status != 404;
}

然后根据结果分配 url，如下所示：

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

【讨论】：

在第四行中，image_url 是否应该是“url”，就像函数采用的参数一样？
对不起，我不清楚。我的意思是，http.open() 的第二个参数是否应该与 imageExists() 函数的参数相同？
No 函数 imageExists(variable) 将接受任何变量（这将是一个 URL），它将执行 AJAX 调用以查看文件是否存在，如果存在则返回 true，否则返回将返回假。因此，在您的脚本中，您将调用此函数，并将您想要测试其可用性的 URL 传递给它；）
啊，好吧。明白了。