为什么可以使用“image/jpeg”数据 URL 显示 base64 编码的 PNG?

dan*_*tra 6 browser base64 image data-uri

下面是一个 base64 编码的 PNG 数据 URL 的示例(当然使用“image/png”数据类型):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTczbp9jAAAA1UlEQVQ4T62SsQ0CMQxFUzAEA1BQMgIlI1zJCIxAT0HJCBSUlFdQMAQlJWOE78hnObYDIuJLTzr/+/5FkpRz/guh2UM9pLQBWzDXvgVacG4lngncAH08QFgGLcEL0LAX34ROHCBcGaRLiEH+meAMXDhESBlkS3bVrh6KEZetQbOk7FmjmL5M40rKTmQSEJVdeXlCDtcSmgRkz4Ro32Zo+pK7+g7LqqEYjduBjsrzT6Mavl3xhzIJcXDkEBHfTl3WfNln8ARhyQR0sDkX6iU0ewjN38npDdYczGIKuRnZAAAAAElFTkSuQmCC
Run Code Online (Sandbox Code Playgroud)

我注意到(在 Firefox 和 Chrome 中)即使数据类型设置为“image/jpeg”(并保持所有其余部分不变),事情仍然有效,如下所示:

data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTczbp9jAAAA1UlEQVQ4T62SsQ0CMQxFUzAEA1BQMgIlI1zJCIxAT0HJCBSUlFdQMAQlJWOE78hnObYDIuJLTzr/+/5FkpRz/guh2UM9pLQBWzDXvgVacG4lngncAH08QFgGLcEL0LAX34ROHCBcGaRLiEH+meAMXDhESBlkS3bVrh6KEZetQbOk7FmjmL5M40rKTmQSEJVdeXlCDtcSmgRkz4Ro32Zo+pK7+g7LqqEYjduBjsrzT6Mavl3xhzIJcXDkEBHfTl3WfNln8ARhyQR0sDkX6iU0ewjN38npDdYczGIKuRnZAAAAAElFTkSuQmCC
Run Code Online (Sandbox Code Playgroud)

但为什么?

wiz*_*zz4 6

它们都使用图像处理子系统,该子系统忽略 mime 类型并仅采用图像的实际格式。

具体来说,大多数浏览器会将图像的查看转换为对<img>其中带有标签的 HTML 网页的查看。由于服务器会撒谎,并且浏览器应该能够显示配置错误的网站,因此浏览器处理图像的部分在大多数情况下将完全忽略任何扩展名或 MIME 类型。URI例外中没有任何编程要点data:。