HTML 图像 - mime 类型答案

【问题标题】：HTML image - mime-typeHTML 图像 - mime 类型
【发布时间】：2017-03-04 21:56:50
【问题描述】：

我正在研究 MIME 类型，但有些东西我还不明白。

我想在我的页面正文中显示 Base64 图像。

我知道这个例子有效：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
 NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
 cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
 gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
 0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
 aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
 v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
 NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
 Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
 AAAAAElFTkSuQmCC" alt="beastie.png">

我想知道，我也可以用这样的东西来实现它吗？

<head>
<meta http-equiv="content-type" content="image/png;">
</head>
<body>
<img src="iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
 NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
 cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
 gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
 0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
 aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
 v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
 NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
 Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
 AAAAAElFTkSuQmCC" alt="beastie.png"> </body>

【问题讨论】：

你没有得到什么？你没有问过一个问题，你可能比你的读者更清楚。一个明确的问题比一个隐含的问题要好得多。 ;)
你的意思是它确实有效吗？我的问题是，它是否像我在第二个示例中展示的那样工作。我的意思是使用类似的语法
啊-我读错了两个代码 sn-ps 之间的句子（缺少一个？-我会编辑它），对此感到抱歉。不——那行不通。 (0) html 文档的 mime-type 不能合法为image/png 和 (1) dataURL 字符串需要包含 mime-type。所以，第二个的语法并不接近，你几乎把它钉牢了——不幸的是，这是错误的。基本上，据我所知，任何 dataURL 都可以复制并粘贴到浏览器的地址栏中。第一个示例中的 base64 字符串满足此条件，第二个不满足。

标签： html image mime-types data-uri

【解决方案1】：

没有。

<meta http-equiv="content-type" content="image/png;"> 描述（很差）HTML 文档 的内容类型。

src="iVBORw0KG etc etc 是一个相对 URL，它将通过用于获取 HTML 文档的任何方案（通常是 HTTP）来获取。

如果您想切换方案（您需要为 data: URI 执行此操作），那么您需要一个绝对 URI。

（稍微简化了一点。Scheme 相关 URI 确实存在，但对您的问题没有帮助。）

【讨论】：

非常感谢！但是，head 中的 content-type 标签的实际用途是什么？
例如什么时候使用“image/png”？
@Herrsocke — 作为一种使用参数指定字符编码的可怕方式。 image/png 只会出现错误。