如何获得<；img>；加载后使用javascript的内容类型

在我的HTML文档中，有一个图像

<img src="https://www.gravatar.com/avatar/1d9c87a4d5cbcae4c76e867cb6861fa0?s=48&d=identicon&r=PG&f=1"/>

---

使用类型为

HEAD

的XMLHttpRequest（类型

HEAD

表示请求将只接收头数据，不会重新下载图像）：

---

请注意，并非所有服务器都实现头请求。

您需要发出头请求才能获取头。下面是另一个使用API的简单版本，如下所示：

getImgContentType (img) {
  return fetch(img.src, { method: 'HEAD' })
    .then(response => response.headers.get('Content-type'))
}

其用途是：

obj.getImgContentType().then(type => {
  console.log(type)
})

---

还要注意，

getImgContentType

的接口需要是异步的。返回承诺很方便。

您可以使用

控制台。登录
并了解您自己吗？如何加载图像，只需
标记im HTML或通过JS？对图像的url进行类型为
HEAD
的XMLHttpRequest。。。。。当然，这只能在CORS的范围内实现：-）@ibrahimmahrir-“键入
HEAD
到图像的URL”？。。。。服务器需要通过发送相应的头来接受跨源请求（CORS）information@devnull69我几乎每天都在使用这种方法，我从来没有遇到过CORS问题。我认为CORS只适用于方法为
GET
或请求的文件不是图像、视频等的情况。。。您知道可以从任何地方访问的人员。@devnull69无需担心HEAD请求（如果您不发送自定义的request头，在本例中我们不会发送）。然后他可以发出与img元素相同的请求，它将使用缓存。@GentleMint HEAD请求的大小小于GET请求。GET请求包含元数据（大小、内容类型等）和实际数据（图像）。HEAD仅重新测试下载的元数据（几个字节）。但这取决于网络速度和其他很多因素，所以速度可能会很慢，但这是唯一的办法。
getImgContentType (img) {
  return fetch(img.src, { method: 'HEAD' })
    .then(response => response.headers.get('Content-type'))
}

obj.getImgContentType().then(type => {
  console.log(type)
})