我可以將.png圖像嵌入html頁面嗎？

如何能夠將.png文件到一個空白的「file.html」，這樣當你打開任何瀏覽器文件，你看到的圖像？在這種情況下，圖像文件沒有鏈接到HTML，而是圖像數據嵌入在HTML本身中。我可以將.png圖像嵌入html頁面嗎？

2010-05-11 Rella

有幾個的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>" />

來源

2010-05-11 00:08:08

然而，你依賴於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/

來源

2010-05-11 00:09:52 juandopazo

請注意，這隻會有小的圖像工作的圖像越大，編碼字符串會得到，而且也到了一個極限多久'src'可以，除此之外，它是非常難懂的:) – Alec 2010-05-11 00:26:15

使用mod_rewrite重定向呼叫file.html沒有URL變化爲用戶

你試過只是重命名image.png文件file.html到image.png？我想大多數的瀏覽器採取MIME頭以上的文件擴展名:)

來源

2010-05-11 02:46:32

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

如果您不使用Apache，該怎麼辦？如果您不使用網絡服務器（例如HTML電子郵件）？ – 2016-01-26 21:49:38

的64base方法適用於大圖像，以及，我使用該方法的所有圖像嵌入到自己的網站，而且屢試不爽。我已經與文件來完成多達的2Mb大小，JPG和PNG。

來源

2012-11-04 04:57:29 Diamax

我不知道這篇文章已經在這裏多久了。但我現在偶然發現了類似的問題。因此張貼解決方案，以便它可以幫助其他人。

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

來源

2012-12-29 08:25:43

我可以將.png圖像嵌入html頁面嗎？

回答

相關問題