数据 uris：PNG 和 JPEG MIME 类型在现代浏览器中是否可以互换？答案

【问题标题】：datauris: are PNG and JPEG MIME types interchangable in modern browsers?数据 uris：PNG 和 JPEG MIME 类型在现代浏览器中是否可以互换？
【发布时间】：2018-01-17 16:04:53
【问题描述】：

我注意到，如果您使用 base64 字符串表示 JPG 或 PNG 的原始字节，请调用此<B>，然后使用 either 将 datauri 发送到浏览器：

data:image/png;base64,<B>

或

data:image/jpeg;base64,<B>

所有四个组合都有效（我的意思是 Chrome 渲染它们），四个组合 <B> 是原始 png 图像或原始 jpeg 图像，并且数据 uri 使用 MIME 类型。

这是为什么？ jpeg 和 png 的二进制编码不一样。我期待如果 <B> 是 png 的原始字节，jpeg datauri 将无法呈现，反之亦然。

【问题讨论】：

浏览器旨在尝试修复所有废话并从所有可能的错误中恢复（标记汤规则！）。从失败的图形格式解码中恢复看起来很容易，对图片进行基于签名的文件格式检测同样简单。
@ÁlvaroGonzález 如果是这样，为什么不能删除 dataURI MIME 类型包含？
强制无法声明内容类型有什么意义？数据 URI 可能包含任何1000+ MIME types，其中许多甚至无法使用基于签名的启发式方法可靠地检测到。这相当于在您的硬盘中的文件中没有文件扩展名。
@ÁlvaroGonzález 但在这种情况下，我强行告诉浏览器 MIME 类型，我预计会失败（在糟糕的情况下），但它“决定更进一步”并尝试其他 MIME类型？在我没有传递 MIME 类型的情况下，我可以使用基于签名的猜谜游戏，但在用户传递 MIME 的情况下则不行
这就是我的两个cmets的意思。你确实需要类型信息。但是当它出错时，浏览器会尝试提供帮助。

标签： data-uri

【解决方案1】：

数据 URL 在 1998 年 8 月的RFC 2397 proposed standard（“数据”URL 方案）中有所描述：

data:[<mediatype>][;base64],<data>

本文档并未真正涉及诸如错误处理之类的实现细节。

值得注意的是，媒体类型部分是可选的，默认为 7 位 US-ASCII 的纯文本：

如果省略<mediatype>，则默认为text/plain;charset=US-ASCII。

现在，根据您的问题，我假设您实际上是在谈论 HTML 文档和 <img> 标签。 src 属性中的信息是来自内联数据 URL 字符串还是来自 HTTP 网络请求可能是次要的，我怀疑原始二进制数据是由浏览器内部的相同例程处理的，无论其来源如何。

您可以通过发送带有常规图像文件的任意 Content-Type 标头来模拟相同的行为。这可以通过（错误）配置您的 Web 服务器、以服务器端语言编写下载脚本或仅重命名文件来完成。事实上，你甚至不需要 HTML：

简而言之，这一切都与浏览器从 fundamental design philosophy of the World Wide Web 产生的错误条件中恢复的能力有关，这是一种有机进化的方式。

【讨论】：