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

问题描述：

如何能够将.png文件到一个空白的“file.html”，这样当你打开任何浏览器文件，你看到的图像？在这种情况下，图像文件没有链接到HTML，而是图像数据嵌入在HTML本身中。我可以将.png图像嵌入html页面吗？

答

有几个的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>" />

然而，你依赖于web浏览器使用是否会完美地工作。 – BalusC 2010-05-11 00:09:37

@BalusC - 的确，但这就是问题所要求的......除了正常的外部文件路径之外没有任何选项。 – 2010-05-11 00:11:46

这似乎并不为我铬工作.. :(想知道以base64数据是错误.. :( – WORMSS 2013-06-20 14:16:45

答

快速谷歌搜索说，你可以把它嵌入这样的：

<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'可以，除此之外，它是非常难懂的:) – Alec 2010-05-11 00:26:15

答

使用mod_rewrite重定向呼叫file.html没有URL变化为用户

你试过只是重命名image.png文件file.html到image.png？我想大多数的浏览器采取MIME头以上的文件扩展名:)

我知道Firefox会这样做，而IE会查看文件本身。 – Rangoric 2010-05-11 02:51:29

如果您不使用Apache，该怎么办？如果您不使用网络服务器（例如HTML电子邮件）？ – 2016-01-26 21:49:38

答

的64base方法适用于大图像，以及，我使用该方法的所有图像嵌入到自己的网站，而且屡试不爽。我已经与文件来完成多达的2Mb大小，JPG和PNG。

答

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

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

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

相关推荐