如何测试相对 url 在 JavaScript 中是否有效？答案

【问题标题】：How to test if relative url works in JavaScript?如何测试相对 url 在 JavaScript 中是否有效？
【发布时间】：2019-09-16 00:50:48
【问题描述】：

这可能是一个非常基本或愚蠢的问题，但我在网上找不到答案，所以......

我在 JavaScript 中使用这个相对 url 来添加一个带有图像的 div。相对 url 指向图片的路径。

我没有看到图像，我不知道这是因为相对 url 错误还是其他原因。有什么方法可以测试 javascript 是否从这个相对 url 中找到图像？

我将包含代码部分，即使我认为问题本身已经很清楚了。

$item.find('.item-content').append('<div class="dragable-item"><img 
url="../Content/onderwijs/images/dragicon.png"/></div>');

提前谢谢你！

【问题讨论】：

在浏览器的开发者控制台中检查您的网络面板。这将有助于确定发生了什么。
另请注意，在附加到 DOM 时使用相对 url 将导致相对链接源自 html 文件而不是您的 javascript 文件（如果这不在同一个文件中）
你应该看看那里，我认为它可能对你有帮助：stackoverflow.com/questions/9714525/javascript-image-url-verify

【解决方案1】：

有一种方法可以测试 JavaScript 是否找到文件。通过使用 fetch 您可以获得状态码。如果是 200 则文件存在。

fetch("../Content/onderwijs/images/dragicon.png").then(function(resp) {
    console.log('Status code is: ', resp.status);
});

您可以从您的页面将上述代码粘贴到您的控制台中，它会告诉您该文件是否存在。

【讨论】：