web-dev-qa-db-fra.com

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

Comment puis-je incorporer un fichier .png dans un "fichier.html" vierge afin que lorsque vous ouvrez ce fichier dans un navigateur, vous voyez cette image? Dans ce scénario, le fichier image n'est pas lié à partir du HTML, mais plutôt les données d'image sont incorporées dans le HTML lui-même.

phphtmlimageembed
41
Rella

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

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

Comme cette page montre que vos principales options sont CSS:

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

Ou la <img> se taguer comme ceci:

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
49
Nick Craver

La méthode 64base fonctionne également pour les grandes images, j'utilise cette méthode pour intégrer toutes les images dans mon site Web, et cela fonctionne à chaque fois. J'ai fini avec des fichiers jusqu'à taille 2Mo, jpg et png.

10
Diamax

Je ne sais pas depuis combien de temps cet article est ici. Mais je suis tombé sur un problème similaire maintenant. C'est pourquoi publier la solution afin 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
Sand33p Prakash

utilisez mod_rewrite pour rediriger l'appel vers file.html vers image.png sans que l'url change pour l'utilisateur

Avez-vous essayé de renommer le fichier image.png en fichier.html? Je pense que la plupart des navigateurs prennent l'en-tête MIME sur l'extension de fichier :)

0
Thomas Winsnes

La recherche rapide sur Google indique 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
juandopazo