2013-05-08 11 views
62

Chcę ustawić źródło obrazu do źródła base64, ale to nie działa:Jak mogę ustawić źródło obrazu z base64

JSfiddle.net/NT9KB

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

kod JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" 
+7

Działa, jeśli usuniesz podziały wierszy w łańcuchu base64. Fiddle zaktualizowany. –

Odpowiedz

87

Try zamiast tego: setAttribute:

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

realna odpowiedź: (I upewnij się usunąć line-przerw w base64.)

+0

thx, przyjmuję za 10 minut, dlaczego setAttribute jest lepszy? – poppel

+0

@poppel Nie sądzę, aby miało to znaczenie, ale moją pierwszą próbą naprawienia twojego skrzypiec było użycie 'setAttribute'. Po tym, jak się nie udało, zauważyłem przerwy w linii w kodowaniu base64. (Ponieważ bardzo się spieszyłem, aby uzyskać odpowiedź, nie próbowałem tego z 'src =' po naprawieniu linii.) –

+0

Powinieneś dodać '' 'before' data: ... ', aby to zadziałało. – Vadim

3
img = new Image(); 
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" 
img.outerHTML; 
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">" 
17

W przypadku wolisz używać jQuery, aby ustawić obraz z Base64:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='); 
+5

@TruthSerum nie używamy go, ponieważ przełączamy się na stos React. Ale dla zabawy, czy masz dowody statystyczne potwierdzające twoje roszczenia? Czy naprawdę uważasz, że nie ma starszych aplikacji internetowych korzystających z jQuery? Twój komentarz jest oparty na twojej osobistej opinii i naprawdę marnuje mój osobisty czas. Również jeśli sprawdzasz projekt, jest on nadal utrzymywany i ma ogromną bazę obserwatorów. https://github.com/jquery/jquery/commits/master –

+5

Również @TruthSerum tutaj są niektóre statystyki, ponieważ nie masz okazji sprawdzić ich przed opublikowaniem komentarza: https://www.google. com/trends/explore # q = jquery% 2C% 20angular & cmpt = q & tz = Etc% 2FGMT-2 –

1

Twój problem to cr (powrót karetki)

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

można użyć:

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" 
+0

Jakie jest rozwiązanie dokładnie tutaj? – AHH

+0

Rozwiązaniem jest tutaj usunięcie podziałów linii (powrót karetki) z bazy 64. –

Powiązane problemy