javascript - 如何在加载后使用 javascript 获取 内容类型

Question

在我的 HTML 文档中，有一张图片

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

在浏览器中打开此文档时，例如Chrome，我们可以根据HTTP响应头在Chrome开发者工具->网络标签中找到这张图片的Content-Type是"image/png"。

如何在图像加载后使用 JavaScript 获取 Content-Type。

更具体地说，我需要的是如下所示的功能。

/**
 * @param  {HTMLImageElement} img
 * @return {String}     the content type, e.g. "image/png", "image/svg+xml"
 */
getImgContentType(img) {
    // TODO
}

Answer 1

您需要发出 HEAD 请求来获取 header 。这是另一个使用 fetch 的简单版本API 可能如下所示:

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

用法是:

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

另请注意，getImgContentType 的接口(interface)需要是异步的。返回 promise 很方便。