varias instancias imagen

url mismos datos ¿Cómo se vuelve a crear instancias de una imagen url de datos base 64 ya declarada sin tener que volver a introducir el código de base 64 en la misma página (preferiblemente con css)varias instancias imagen

me trataron:

<html><head> 
    <style type="text/css"> 
     img.wink { width:15px; height:15px; 
      src:"data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs="; 
     } 
    </style> 
</head><body> 
    <h1>Hello</h1> 
    <img class="wink"/>, and just to test my sanity <img width="15px" height="15px" src="data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=" alt=";)"/>. 
</body></html>

Fuente

2010-10-29 GlassGhost

que el CSS no es correcta, hacen que el data la URL en el background-image, a continuación, puede hacer referencia a ella por clase.

<html> 
<head> 
    <style type="text/css"> 
     div.wink 
     { 
      width:15px; 
      height:15px; 
      background-image: url('data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs='); 
     } 
    </style> 
</head> 
<body> 
    <h1>Hello</h1> 
    <div class="wink"></div> 
    <br/> 
    and just to test my sanity 
    <div class="wink"></div>. 
</body> 
</html>

Fuente

2010-10-29 19:19:17

Por qué usar 'div' s? –

Puedes usar cualquier elemento, pero usar un fondo en un elemento 'image' no es lo que él necesita. Para reutilizar esa imagen única, debe hacerse a través de CSS. –

@Dustin No, no estás entendiendo mi deriva. Ver mi respuesta por favor. –

si las imágenes no traen semántica al documento sólo podría definir la url base 64 como un fondo de un elemento sin usar <img> por CSS

De lo contrario, podría salvar la cadena de base 64 en un servidor- lateral variabile, luego coloque el src colocando esa variable donde sea que lo necesite

si no puede usar un lenguaje del lado del servidor aún puede usar javascript (pero es mejor no confiar en los scripts para acceder al contenido), solo use un fragmento domready como así:

var img = document.getElementsByTagName('img'), 
    len = img.length; 
while (--len) { 
    if (-1 < img[len].className.indexOf('wink')) 
     img[len].src = 'data:image/.gif;base64,..."; 
}

Fuente

2010-10-29 19:19:44

intente esto:

<html><head> 
    <style type="text/css"> 
     div.wrapper { 
      background-image: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=); 
      width:15px; height:15px; 
     } 

</style> 
</head><body> 
    <h1>Hello</h1> 
    <div class="wrapper"> 
    <br/> 
</body></html>

IE 8, Firefox 2 y 3, Safari, Safari móvil (iPhone y navegadores), y Google Chrome de apoyo integrados de datos de imagen binarios en archivos CSS. IE 6 y 7 NO.

leer más aquí: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

Fuente

2010-10-29 19:25:46

src no es una propiedad CSS válido. Es necesario utilizar content para este ...

img.wink { 
    content: url(data:image/gif;base64,BLAH_BLAH_BLAH); 
    height: 15px; 
    width: 15px; 
}

Funciona: Live Demo

Fuente

2010-10-29 19:31:00

Creo que funciona, pero ¿en qué navegador (estoy loco)? Estoy usando Firefox en Ubuntu Lynx. – GlassGhost

Eso no funciona en FF 3.6 o IE 7/8/9. –

@GlassGhost Estoy usando Chrome –

Respuesta

Cuestiones relacionadas