¿Cómo puedo incrustar un archivo .png en un "archivo.html" en blanco para que cuando abra ese archivo en cualquier navegador vea esa imagen? En este escenario, el archivo de imagen no está vinculado desde el HTML, sino que los datos de imagen están incrustados en el propio HTML.¿Puedo incrustar una imagen .png en una página html?
Hay algunos codificadores base64 en línea para ayudarle con esto, este es probablemente el mejor que he visto:
http://www.greywyvern.com/code/php/binary2base64
Como esa página muestra sus principales opciones para esto son CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
O la etiqueta <img> en sí, así:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
rápida búsqueda en Google dice que se puede integrar de esta manera:
<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">
pero se necesita una implementación diferente en Internet Explorer.
http://www.websiteoptimization.com/speed/tweak/inline-images/
Tenga en cuenta que esto solo funcionará con imágenes pequeñas. Cuanto más grande sea la imagen, más grande será la cadena codificada, y hay un límite de cuánto tiempo 'src' puede ser. Y aparte de eso, es uggly imho :) – Alec
uso mod_rewrite para redirigir la llamada a file.html a image.png sin cambiar para el usuario
¿Ha intentado simplemente cambiando el nombre del archivo image.png a file.html url? Creo que la mayoría de los navegadores llevan el encabezado mime sobre la extensión de archivo :)
Sé que Firefox hace eso, mientras que IE verá el archivo en sí. – Rangoric
¿Qué pasa si no estás usando Apache? ¿Qué pasa si no estás usando ningún Apache? servidor web en absoluto (por ejemplo, correo electrónico HTML)? –
El método 64base también funciona para imágenes grandes. Utilizo ese método para incrustar todas las imágenes en mi sitio web y funciona siempre. He terminado con archivos de hasta 2Mb tamaño, jpg y png.
No se cuanto tiempo lleva esta publicación aqui. Pero me encontré con un problema similar ahora. De ahí publicando la solución para que pueda ayudar a otros.
#!/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
Sin embargo, depende del navegador web utilizado, ya sea que funcione sin problemas. – BalusC
@BalusC - Es cierto, pero eso es lo que hizo la pregunta ... no hay más opciones que la ruta de archivo externo normal. –
Esto no parece funcionar en Chrome ... :(Preguntándome si los datos de base64 son incorrectos .. :( – WORMSS