2011-01-25 19 views
5

He intentado todas las formas posibles de mostrar imágenes usando base64 string. Pero ninguno de ellos está funcionando. Lo probé en IE6,7, Firefox 3. Por favor, dime qué está mal con el código a continuación.BASE64 en HTML no funciona

<head> 

<STYLE type="text/css"> 
div.image { 
    width:100px; 
    height:100px; 
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); 
} 
</STYLE> 
</head> 
<body> 
<img src="data:image/jpg;base64,968" /> 
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." /> 
<script type="text/javascript" src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script> 
<div class="image"></div> 
</body> 
+0

He encontrado [esta página] (http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html) donde estaba (julio, 2005) hecho para una imagen GIF. El ejemplo (still) funciona para mí en Firefox 3.6. Solo esta interesante mención en los comentarios que tal vez la URL tiene un tamaño limitado ... – pascal

+0

Sin embargo, el motivo de esta implementación, que el servidor fue cargado por los accesos a los íconos, probablemente debería ser mitigado por el avance en la administración del caché (en servidor, red, lados del cliente) desde ese momento ... – pascal

Respuesta

4

he comprobado en IE6,7, Firefox 3

Lo que ocurre es que ninguno de estos URIs de datos de apoyo (bueno, Firefox 3 hace que pienso, pero no muy bien). Entonces no estás haciendo nada mal.

Si necesita su imagen de fondo para mostrar en estos navegadores, simplemente use los archivos de imagen tradicionales y url() en su lugar.

+0

+1, y aquí hay una forma JS para detectar si su navegador lo admite. http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/ –

+0

Probé en firfox 3.6, ¿hay alguna otra manera de mostrar la imagen sin dar ninguna otra referencia externa? –

+0

@articlestack: Firefox 3.6 debería ser compatible con los URI de datos correctamente. Pero, sinceramente, ¿vale la pena la molestia? Es probable que su imagen no sea muy grande, por lo que una solicitud HTTP adicional para esa imagen no va a doler. – BoltClock