Могу ли я вставить изображение .png в HTML-страницу? - PullRequest
Новая
       71

Могу ли я вставить изображение .png в HTML-страницу?

40 голосов
/ 11 мая 2010

Как я могу встроить файл .png в пустой файл "file.html", чтобы при открытии этого файла в любом браузере вы видели это изображение? В этом сценарии файл изображения не связан с HTML, а данные изображения встроены в сам HTML.

Ответы [ 5 ]

48 голосов
/ 11 мая 2010

Есть несколько кодировщиков 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>" />
10 голосов
/ 04 ноября 2012

Метод 64base работает и для больших изображений, я использую этот метод для встраивания всех изображений в мой сайт, и он работает каждый раз.Я сделал с файлами до 2 МБ , JPG и PNG.

3 голосов
/ 29 декабря 2012

Я не знаю, как долго этот пост был здесь.Но я наткнулся на похожую проблему сейчас.Следовательно, опубликовать решение, чтобы оно могло помочь другим. 

#!/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
0 голосов
/ 11 мая 2010

используйте mod_rewrite, чтобы перенаправить вызов file.html в image.png без изменения URL для пользователя

Вы пытались просто переименовать файл image.png в file.html? Я думаю, что большинство браузеров принимают заголовок MIME над расширением файла:)

0 голосов
/ 11 мая 2010

Быстрый поиск в 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/

...