¿Cómo puedo configurar la fuente de imagen con base64?

93

Quiero configurar la fuente de la imagen en una fuente base64 pero no funciona:

JSfiddle.net/NT9KB

<img id="img" src="" />

el JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
javascript base64 poppel
fuente
9
Funciona si elimina los saltos de línea en la cadena base64. Fiddle actualizado.
Adriano Repetti

Respuestas:

136

Intente usar en su setAttributelugar:

document.getElementById('img')
    .setAttribute(
        'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    );

Respuesta real: (Y asegúrese de eliminar los saltos de línea en base64).

Kevin Boucher
fuente
gracias, lo aceptaré en 10 minutos, ¿por qué setAttribute es mejor?
poppel
@poppel No creo que importe, pero mi primer intento de arreglar tu violín fue usar setAttribute. Fue después de que falló que noté los saltos de línea en la codificación base64. (Como me apresuraba a que me enviaran una respuesta, no lo intenté src=después de corregir los saltos de línea).
Kevin Boucher
26

En caso de que prefiera usar jQuery para configurar la imagen desde Base64:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
Faris Zacina
fuente
5
@TruthSerum no lo estamos usando, ya que cambiamos a una pila de React. Pero para divertirse, ¿tiene evidencia estadística para probar su afirmación? ¿De verdad crees que no hay aplicaciones web heredadas que utilicen jQuery? Su comentario se basa en su opinión personal y realmente es una pérdida de mi tiempo personal. Además, si revisa el proyecto, aún se mantiene y tiene una gran base de seguidores. github.com/jquery/jquery/commits/master
Faris Zacina
5
También @TruthSerum aquí hay algunas estadísticas, ya que no tuvo la oportunidad de verificarlas antes de publicar su comentario: google.com/trends/…
Faris Zacina
Estos días, prop debería usarse en lugar de attrpara actualizar el DOM. attrse refiere al estado de la página original al cargar.
AntonChanning
6 
img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"
zzart
fuente
3

Tu problema son los cr (retorno de carro)

http://jsfiddle.net/NT9KB/210/

puedes usar: 

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
Matías Damonte
fuente
¿Cuál es la solución exactamente aquí?
AHH
La solución aquí es eliminar los saltos de línea (retornos de carro) de la Base 64.
Kevin Boucher