Como posso definir a fonte da imagem com base64

93

Quero definir a fonte da imagem para uma fonte base64, mas não funciona:

JSfiddle.net/NT9KB

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

o JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
javascript base64 poppel
fonte
9
Funciona se você remover quebras de linha na string base64. Fiddle atualizado.
Adriano Repetti

Respostas:

136

Tente usar setAttribute:

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

Resposta real: (e certifique-se de remover as quebras de linha na base64.)

Kevin Boucher
fonte
obrigado, aceitarei em 10 minutos, por que setAttribute é melhor?
Poppel
@poppel Acho que não importa, mas minha primeira tentativa de consertar seu violino foi usar setAttribute. Foi depois que isso falhou que notei as quebras de linha na codificação base64. (Como estava com pressa para enviar uma resposta, não tentei src=depois de consertar as quebras de linha.)
Kevin Boucher
26

Caso você prefira usar jQuery para definir a imagem de Base64:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
Faris Zacina
fonte
5
@TruthSerum não o estamos usando, pois mudamos para uma pilha React. Mas, para se divertir, você tem evidências estatísticas para provar sua afirmação? Você realmente acha que não há aplicativos da web legados usando jQuery? Seu comentário é baseado em sua opinião pessoal e realmente uma perda de tempo pessoal. Além disso, se você verificar o projeto, ele ainda é mantido e tem uma enorme base de seguidores. github.com/jquery/jquery/commits/master
Faris Zacina
5
Também @TruthSerum aqui estão algumas estatísticas, já que você não teve a chance de verificá-las antes de postar seu comentário: google.com/trends/…
Faris Zacina
Hoje em dia, propdeve ser usado em vez de attratualizar o DOM. attrrefere-se ao estado da página original no carregamento.
AntonChanning de
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
fonte
3

Seu problema é o cr (retorno de carro)

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

você pode usar: 

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
Matías Damonte
fonte
Qual é a solução exatamente aqui?
AHH de
A solução aqui é remover as quebras de linha (retornos de carro) da Base 64.
Kevin Boucher