Puis-je intégrer un.une image png dans une page html?

Comment puis-je intégrer un .png dans un vide de fichier".html", de sorte que lorsque vous ouvrez ce fichier dans un navigateur, vous voyez l'image? Dans ce scénario, le fichier image n'est pas lié au HTML mais les données image sont intégrées au HTML lui-même.

35
demandé sur intcreator 2010-05-11 04:01:14

5 réponses

Il y a quelques base64 encodeurs en ligne pour vous aider avec ceci, c'est probablement le meilleur que j'ai vu:

http://www.greywyvern.com/code/php/binary2base64

cette page montre vos options principales de ce CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>); 
}

Ou <img> balise elle-même, comme ceci:

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
47
répondu Nick Craver 2010-05-11 00:08:08

la méthode 64base fonctionne pour les grandes images aussi, j'utilise cette méthode pour intégrer toutes les images dans mon site web, et cela fonctionne à chaque fois. J'en ai fini avec les fichiers jusqu'à 2 mo taille, jpg et png.

9
répondu Diamax 2012-11-04 05:17:11

Je ne sais pas depuis combien de temps ce post est ici. Mais je suis tombé sur le même problème maintenant. D'où l'affichage de la solution pour qu'elle puisse aider les autres.

#!/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
3
répondu Sand33p Prakash 2012-12-29 08:25:43

recherche Rapide sur google vous dit que vous pouvez l'intégrer comme ceci:

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

mais vous avez besoin d'une implémentation différente dans Internet Explorer.

http://www.websiteoptimization.com/speed/tweak/inline-images/

0
répondu juandopazo 2010-05-11 00:09:52

utiliser mod_rewrite pour rediriger l'appel vers un fichier.code html pour l'image.png sans changement d'url pour l'utilisateur

avez-vous essayé de simplement renommer l'image.png un dossier à l'autre.le html? Je pense que la plupart des navigateurs prennent en-tête mime sur l'extension de fichier :)

0
répondu Thomas Winsnes 2010-05-11 02:46:32