如何从 URL 获取图像的扩展名？答案

【问题标题】：How to get extension of image from URL?如何从 URL 获取图像的扩展名？
【发布时间】：2021-02-02 00:20:52
【问题描述】：

我正在开发一个反应原生应用程序，它从 URL 获取图像并保存在本地设备中。

const getExtention = (filename) => {
  return /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined;
};

我正在使用上面的代码来获取此类文件的图像扩展名。 https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg

但也有一些图片网址不带扩展名，如下所示

https://media.gettyimages.com/photos/woman-lifts-her-arms-in-victory-mount-everest-national-park-picture-id507910624?s=612x612

那么我怎么知道上图的扩展名是什么？存储在设备中

【问题讨论】：

服务器应该报告正确的图像 MIME 类型。每种 mime 类型映射到一个（或多个）扩展。您需要为所有受支持的 mime 类型提供地图。
@JoachimSauer 你能提供一些例子吗？
我不使用 react，所以我不能提供代码，但是有 plenty of documentation 关于什么是 mime 类型以及它们是如何工作的。
问题是：为什么你有没有扩展名的图片网址？
@BinaryMan：URL 根本没有包含扩展名（或文件名）的“义务”或技术原因。像http://example.com/someImage 这样的 URL 提供 JPEG 图像是非常好的（并且在野外经常发生）。理论上，即使http://image.example.com 也可以提供图像。这不是错误或问题。这是一个简单的事实。

标签： javascript reactjs image react-native

【解决方案1】：

正如有人已经在 cmets 中提出的关于 MIME 类型映射的建议，并且我同意说，要检测/获取远程文件 URL 的扩展名，你不能在不知道它的 MIME 类型的情况下执行此操作。

var url = 'https://media.gettyimages.com/photos/woman-lifts-her-arms-in-victory-mount-everest-national-park-picture-id507910624?s=612x612';
var xhttp = new XMLHttpRequest();
xhttp.open('HEAD', url);
xhttp.onreadystatechange = function () {
    if (this.readyState == this.DONE) {
        console.log(this.getResponseHeader("Content-Type"));
    }
};
xhttp.send();

通过上面的代码，我可以得到它的类型，即image/jpeg。现在，要将 MIME 类型转换为 .ext，您可以创建自己的列表来执行此操作，也可以使用以下任何包：

【讨论】：