有没有一种方法可以轻松检查图像网址是否有效？

Question

我正在尝试编写一个函数来检查图像 URL 是否是实际图像，如果是，则返回 true，否则返回 false，

像这样的东西：

checkImage(imageURL){
  if imageURL.isReal{
    return true
 }
 return false
}

我找到了很多答案，但它们并没有真正起到布尔函数的作用

Answer 1

最优雅的解决方案是使用XMLHttpRequest并检查响应代码。如果是200，则图像存在，如果是不同的东西，则很可能该图片 - 或者更准确地说是一般的网址 - 不存在。这是一个例子：

function checkImage(url) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.send();
  request.onload = function() {
    status = request.status;
    if (request.status == 200) //if(statusText == OK)
    {
      console.log("image exists");
    } else {
      console.log("image doesn't exist");
    }
  }
}
checkImage("https://picsum.photos/200/300");

嗯，正如我所说，这是一种更通用的方法。如果您想确定它实际上是一个图像，您可以利用 Image 对象的onerror和onload事件。

function checkImage(url) {
  var image = new Image();
  image.onload = function() {
    if (this.width > 0) {
      console.log("image exists");
    }
  }
  image.onerror = function() {
    console.log("image doesn't exist");
  }
  image.src = url;
}
checkImage("https://picsum.photos/200/300");

Answer 2

您可以使用 fetch API。XHR 的现代变体。

所以喜欢

async function checkImage(url){
     
     const res = await fetch(url);
     const buff = await res.blob();
    
     return buff.type.startsWith('image/')

}

这样

checkImage('https://example.com/notAnImage.txt') // false
checkImage('https://example.com/image.png') // true