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=="

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.)


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==');

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==">"

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=="

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.