【发布时间】：2011-02-17 22:23:08
【问题描述】：
如何将 .png 文件嵌入到空白的“file.html”中，以便在任何浏览器中打开该文件时都能看到该图像？
在这种情况下，图像文件不是从 HTML 链接到的，而是图像数据嵌入在 HTML 本身中。
【问题讨论】：
【发布时间】：2011-02-17 22:23:08
【问题描述】：
网上有一些Base64 编码器可以帮助你解决这个问题，这可能是我见过的最好的：
http://www.greywyvern.com/code/php/binary2base64
由于该页面显示您的主要选项是 CSS：
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
或者<img>标签本身，像这样：
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
【讨论】：
-
然而，你依赖于所使用的网络浏览器是否能完美运行。
-
@BalusC - 没错，但这就是问题所要求的......除了正常的外部文件路径之外没有任何选项。
-
这在 chrome 中似乎对我不起作用.. :( 想知道 base64 数据是否错误.. :(
-
这是另一个网站，可让您从本地硬盘驱动器（而不是从 URL）编码图像文件：opinionatedgeek.com/dotnet/tools/Base64Encode
-
为此，您可能需要在 HTML 标头中定义您的字符集，例如 （并确保您的 base64 字符串使用相同的字符集！）
64base 方法也适用于大图像。我使用这种方法将所有图像嵌入到我的网站中，并且每次都有效。我已经处理了最大 2 MB 大小、JPEG 和 PNG 的文件。
【讨论】：
-
是“64base”字面意思还是你的意思是Base64？
我现在偶然发现了类似的问题，解决方案是：
#!/usr/bin/env perl
use strict;
use warnings;
use utf8;
use GD::Graph::pie;
use MIME::Base64;
my @data = (['A','O','S','I'],[3,16,12,47]);
my $mygraph = GD::Graph::pie->new(200, 200);
my $myimage = $mygraph->plot(\@data)->png;
print <<end_html;
<html><head><title>Current Stats</title></head>
<body>
<p align="center">
<img src="data:image/png;base64,
end_html
print encode_base64($myimage);
print <<end_html;
" style="width: 888px; height: 598px; border-width: 2px; border-style: solid;" /></p>
</body>
</html>
end_html
【讨论】：
-
解释一下。
快速的 Google 搜索表明您可以像这样嵌入它：
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
但您需要在 Internet Explorer 中进行不同的实现。
http://www.websiteoptimization.com/speed/tweak/inline-images/
【讨论】：
-
请注意，这只适用于小图像。图像越大，编码的字符串越大，
src的长度是有限制的。除此之外，它是丑陋的恕我直言:) -
我在 2019 年看到这个，我认为限制不再特别低了。
使用mod_rewrite 将对file.html 的调用重定向到image.png，而不为用户更改URL。
您是否尝试过将 image.png 文件重命名为 file.html？我认为大多数浏览器都采用 mime 标头而不是文件扩展名:)
【讨论】：
-
我知道 Firefox 会这样做，而 IE 会查看文件本身。
-
如果您不使用 Apache 怎么办？如果您根本不使用任何网络服务器（例如 HTML 电子邮件）怎么办？
您可以嵌入 png 图像，就像您可以从设备或网络将 jpg 图像或任何类型的图像嵌入 html 中一样。
保存在设备上时，请确保图片的类型为 png。方法相同，但我将其嵌入为 jpg。<embed type="image/jpg" src="https://s3-us-west-2.amazonaws.com/textimgs/music/250px-Antonio_Vivaldi.jpg" width="500" height="500">
</EMBED>我要感谢 Stack Overflow 让我们提问和回答！！！！！！！！！！！！！！！
【讨论】：
-
虽然使用
<embed>标签在技术上没有错，但最好使用<image>标签。
您可以使用其他答案中列出的方法嵌入图像，例如在 HTML 中
<img alt="My Image" src="data:image/png;base64,base64-data-goes-here" />
或 CSS
div#my-image {
width:150px;
height:100px;
background-image:url(data:image/png;base64,base64-data-goes-here);
}
对于 Base64 编码，在 Linux 上，我使用标准的 base64 工具并关闭换行，如下所示：
base64 -w 0 my-image.png
并逐字复制/粘贴输出文本。
【讨论】：