Question

如何将.png文件嵌入到空白的“file.html”中，以便在任何浏览器中打开该文件时都能看到该图像？在这种情况下，图像文件没有链接到HTML，而是图像数据嵌入在HTML本身中。

Answer 1

网上有一些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>" />

Answer 2

64base方法也适用于大型图像，我使用该方法将所有图像嵌入到我的网站中，并且每次都可以使用。我已经完成了 2Mb ，jpg和png的文件。

Answer 3

我不知道这篇文章已经有多长时间了。但我现在偶然发现了类似的问题。因此，发布解决方案，以便它可以帮助其他人。

#!/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

Answer 4

快速谷歌搜索说你可以这样嵌入：

<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/

Answer 5

使用mod_rewrite将调用重定向到file.html到image.png，而不更改用户的网址

您是否尝试过将image.png文件重命名为file.html？我认为大多数浏览器都采用mime头文件扩展名：）

Answer 6

您可以像在 html 中嵌入 jpg 图像或任何类型的图像一样从您的设备或网络中嵌入 png 图像。

在您的设备上保存图像时，请确保图像的类型为 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 让我们提问和回答！！！！！！！！！！！！！！！！！！！

我可以将.png图像嵌入到html页面中吗？

6 个答案: