javascript - 检测加载的图像是否为没有文件扩展名的 SVG

Question

我需要知道图像文件在哪里是 SVG(用于回退)，但我使用的 CMS 不会在 URL 中泄露文件扩展名。

我如何才能知道加载的图像是否为 SVG？

(URL 看起来像这样 domain.com/files/images/100，其中 100 是图像的 ID。)

Answer 1

URL 无论如何都不能确定文件类型，example.com/foo.jpg 可能是 SVG。决定文件类型的是 content-type HTTP header ，我们可以通过 HEAD 请求有效地获取它，它获取 header 而不是图像本身。

async function urlIsSvg(url) {
  const r = await fetch(url, {method: 'HEAD'});
  return r.headers.get('content-type') === 'image/svg+xml';
}

console.log(
  await urlIsSvg('https://picsum.photos/100'),
  await urlIsSvg('https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg'),
);