Come posso incorporare un file .png in un file "file.html" vuoto in modo che quando apri quel file in qualsiasi browser vedi quell'immagine? In questo scenario il file immagine non è collegato da HTML ma piuttosto i dati dell'immagine sono incorporati nel codice HTML stesso.Posso incorporare un'immagine .png in una pagina html?
ci sono un paio di encoder base64 on-line per aiutarvi con questo, questo è probabilmente il migliore che ho visto:
http://www.greywyvern.com/code/php/binary2base64
Come quella pagina mostra i principali opzioni per questo sono i CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
O il tag <img> stesso, in questo modo:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
rapida ricerca su Google dice che si può incorporare in questo modo:
<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">
Ma avete bisogno di un'implementazione diversa in Internet Explorer.
http://www.websiteoptimization.com/speed/tweak/inline-images/
Si noti che questo funziona solo con immagini di piccole dimensioni: più grande è l'immagine, più grande sarà la stringa codificata, e c'è un limite alla durata della 'src' può essere. E a parte questo, è uggly imho :) – Alec
uso mod_rewrite per reindirizzare la chiamata a file.html al immagine.png senza l'url cambiare per l'utente
Hai provato semplicemente rinominando il file immagine.png a file.html? Penso che la maggior parte dei browser utilizzi l'intestazione di mime sull'estensione del file :)
So che Firefox lo fa, mentre IE guarderà il file stesso – Rangoric
E se non stai usando Apache? server web (es. email HTML)? –
Il metodo 64base funziona anche per immagini di grandi dimensioni, utilizzo questo metodo per incorporare tutte le immagini nel mio sito Web e funziona sempre. Ho finito con file fino a 2Mb dimensioni, jpg e png.
Non so per quanto tempo questo post è stato qui. Ma mi sono imbattuto in un problema simile ora. Quindi postare la soluzione in modo che possa aiutare gli altri.
#!/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
Si dipende tuttavia dal browser utilizzato se funzionerà in modo impeccabile. – BalusC
@BalusC - Vero, ma è quello che la domanda ha chiesto ... non tutte le opzioni tranne la normale rotta di file esterni. –
Questo non sembra funzionare per me in chrome .. :(Mi chiedo se i dati di base64 sono sbagliati .. :( – WORMSS