使用Javascript检查图像URL是否有效

Question

基本上，我需要检查图片的URL是否有效，以便显示它或者显示一些占位图片。

最好的解决方案似乎是进行一个Ajax请求或类似的操作，并根据响应进行处理。问题在于请求说它“已被CORS阻止”，因此这总是返回false，因此该函数始终显示占位符图像。

function checkImg(url){
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json'
    }).done(function (response) {
        return true
    }).fail(function(jqXHR, textStatus, errorThrown) {
        return false
    })
}

if checkImg(url){
    # do something
} else {
    # do something else
}

我最烦恼和困惑的是，我可以直接访问图片（例如从此URL：https://vikua.com/images_cameras_rails/521474/large/image），但控制台会返回“由于CORS被阻止”的错误信息。

此外，如果我将链接直接放在HTML标签中，图片也能正常工作，但我无法从那里进行错误处理，对吗？

感激任何答案。

编辑：事实证明，我实际上可以通过一些HTML来处理这种错误。使用'onerror'就可以了！非常感谢jonatjano提供的解决方案！

- Orion Melgarejo

---

跨域资源共享（CORS）会阻止检索图像，除非服务器已设置适当的CORS规则，请参见https://stackoverflow.com/a/30026842/6803592。 - Olaf

相反，你应该选择图片懒加载。当你寻找时，有数百个插件可供选择。 - Sachin Vishwakarma

你的 JavaScript 知道访问者是否能够从不同的来源加载图像，这是一个隐私问题（简单的例子：图像可能受到密码保护，如果用户已登录其他站点，则会泄露）。因此，你不能这样做（除非通过 CORS 获得了授权）。 - Quentin

Answer 1

实际上，有一种方法可以直接在HTML标签上检测错误。最初的回答。

let works = document.getElementById("works")
let breaks = document.getElementById("breaks")

let placeHolderSrc = "https://www.morawealth.com/wp-content/uploads/2015/06/placeholderimg.png"

let errorHandler = e => {
  console.log(e.target.id, "couldn't load image replacing with placeholder")
  e.target.src = placeHolderSrc
}
works.onerror = errorHandler
breaks.onerror = errorHandler

img {
  width: 25%;
  height: 25%;
}

<img id="works" src="https://vikua.com/images_cameras_rails/521474/large/image">
<img id="breaks" src="https://vikua.com/images_camerails/521474/lge/ime">

你也可以使用标签onerror属性来实现，如果你不想使用JS，但这被认为是一种不好的做法。最初的回答。

img {
  width: 25%;
  height: 25%;
}

<img id="works" src="https://vikua.com/images_cameras_rails/521474/large/image"
onerror="this.src = 'https://www.morawealth.com/wp-content/uploads/2015/06/placeholderimg.png'">
<img id="breaks" src="https://vikua.com/images_camerails/521474/lge/ime"
onerror="this.src = 'https://www.morawealth.com/wp-content/uploads/2015/06/placeholderimg.png'">

- jonatjano