如何在 html 文档中嵌入大图像？

Question

我需要创建一个将存储在磁盘上的 HTML 文件；稍后，用户将此文件附加到电子邮件中并将其发送给将单击该文件以使其显示在浏览器中的用户。我的客户要求将图像文件直接嵌入到保存的 html 文件中，而不是作为在浏览器中打开文档时加载的 URL 的链接。

我已经看到（并尝试过）如下所示的 base64 代码：

<IMG SRC="data:image/gif;base64,

但我的图像是 150K 或更大，至少在 IE8 中，它们太大而无法正常显示。

还有其他方法可以将大图像嵌入（ 链接）到 HTML 文档中吗？请记住，我不会运行与浏览器交互的程序。

Answer 1

感谢大家，但 Albert 的帖子给了我答案，虽然有点间接。我最初将我的 html 文档创建为电子邮件，并将图像直接嵌入到电子邮件中，混合了 htm 和 mime。我需要做的就是将文档的扩展名从 .htm 更改为 .mht。

我的文档代码的相关部分是：

<img border=3 width="360" height="360" src="cid:001@mime.mail"></table></div></body></html>
--_=_Boundary_001_VXUXGWO1.FBLEINFI
Content-Type: application/octet-stream; name="1.jpg"
Content-Disposition: attachment; filename="1.jpg"
Content-ID: <001@mime.mail>
Content-Transfer-Encoding: base64
Content-Description: 1.jpg

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA...

注意 src="cid:001@mime.mail" 对应于实际图像数据开始位置上方的 Content-ID 标签。

Answer 2

IE 8 的数据 uri 限制为 32k (http://en.wikipedia.org/wiki/Data_URI_scheme)，这就是你在那里失败的原因。此外，IE 的版本低于 8 将不支持此功能。

据我所知，没有办法解决这个问题。但是，您可以分解图像并对其单独的部分进行编码。因为听起来这个内容无论如何都不是动态的，所以这可能不会太难。否则，您可能只想使用 CSS hack 为 IE8 及更低版本提供不同的样式，或者尝试从这些浏览器的服务器加载图像。