有没有办法轻松检查图片网址是否有效？答案

【问题标题】：is there a way to easily check if the image url is valid or not?有没有办法轻松检查图片网址是否有效？
【发布时间】：2019-09-16 17:03:27
【问题描述】：

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

类似的东西：

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

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

【问题讨论】：

一个“有效”的 URL 可能意味着很多事情。我希望您的意思是“现有有效资源的位置”，特别是图像？有效的 URL 可能意味着所谓的结构良好的 URL，即是一个 URL，但不一定指向一个有效的或什至现有的（当时、现在或任何时候）资源。跨度>

标签： javascript image

【解决方案1】：

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

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");

【讨论】：

但是这种方式也正确，链接没有返回图像？
我喜欢这个答案。请注意：我建议不要对请求方法使用“GET”，而是使用“HEAD”——这在服务器和客户端上都更容易。当然，不幸的是，一个实施不佳的 Web 服务有可能不会为同一个 URL 实施“HEAD”（它应该按照 HTTP 规范），但我想认为，如果你做的足够正确次，错误的东西会理顺。
@obscure 谢谢你的回答，但该功能是控制台日志记录，我希望它返回真或假，就像在我的示例中一样，由于某种原因，我无法更改你的代码来做到这一点，你能把它写成布尔值吗？

【解决方案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

【讨论】：

哇，这颗宝石竟然藏在这里！

【解决方案3】：

您可以使用 XMLHttpRequest 的 getResponseHeader 来检查您的请求成功返回的内容的 mime 类型。实际上，仅根据请求的http成功响应码是无法知道响应内容的。

XMLHttpRequest 方法 getResponseHeader() 返回字符串包含特定标头值的文本。如果有多个具有相同名称的响应头，那么它们的值是作为单个连接字符串返回，其中每个值是由一对逗号和空格与前一个分隔。这 getResponseHeader() 方法以 UTF 字节序列的形式返回值。

在这个例子中，一个请求被创建并发送，一个 readystatechange 建立处理程序以查找 readyState 以指示已收到标头；在这种情况下，获取 Content-Type 标头。如果 Content-Type 不是所需的值，则通过调用 abort() 取消 XMLHttpRequest。

var client = new XMLHttpRequest();
client.open("GET", "unicorns-are-teh-awesome.txt", true);
client.send();

client.onreadystatechange = function() {
  if(this.readyState == this.HEADERS_RECEIVED) {
    var contentType = client.getResponseHeader("Content-Type");
    if (contentType != my_expected_type) {
      client.abort();
    }
  }
}

一切顺利。

【讨论】：