Jak ustawić źródło obrazu w base64

96

Chcę ustawić źródło obrazu na źródło base64, ale to nie działa:

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

JavaScript

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

javascript base64

— poppel
źródło

9

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

— Adriano Repetti

140

setAttributeZamiast tego spróbuj użyć :

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

Prawdziwa odpowiedź: (I upewnij się, że usunąłeś podziały wierszy w base64.)

— Kevin Boucher
źródło

thx, zaakceptuję za 10 minut, dlaczego setAttribute jest lepszy?

— poppel

@poppel Nie sądzę, żeby to miało znaczenie, ale moją pierwszą próbą naprawienia twoich skrzypiec było użycie setAttribute. Dopiero po tym niepowodzeniu zauważyłem przerwy w linii w kodowaniu base64. (Ponieważ spieszyłem się, aby otrzymać odpowiedź, nie próbowałem tego src=po naprawieniu przerw.)

— Kevin Boucher

26

Jeśli wolisz użyć jQuery do ustawienia obrazu z Base64:

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

— Faris Zacina
źródło

5

@TruthSerum nie używamy go, ponieważ przełączamy się na stos React. Ale dla zabawy, czy masz dowody statystyczne, aby udowodnić swoje twierdzenie? Czy naprawdę myślisz, że nie ma starszych aplikacji internetowych korzystających z jQuery? Twój komentarz jest oparty na twojej osobistej opinii i naprawdę jest stratą mojego osobistego czasu. Również jeśli sprawdzisz projekt, nadal jest utrzymywany i ma ogromną bazę obserwujących. github.com/jquery/jquery/commits/master

— Faris Zacina

5

Również @TruthSerum tutaj jest kilka statystyk, ponieważ nie miałeś szansy ich sprawdzić przed opublikowaniem komentarza: google.com/trends/ ...

— Faris Zacina

Obecnie proppowinien być używany zamiast attraktualizowania DOM. attrodnosi się do oryginalnego stanu strony podczas ładowania.

— 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
źródło

4

Twoim problemem jest CR (powrót karetki)

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

możesz użyć:

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

— Matías Damonte
źródło

Jakie jest tutaj rozwiązanie?

— AHH

Rozwiązaniem jest tutaj usunięcie podziałów wierszy (powrotu karetki) z bazy 64.

— Kevin Boucher