Görüntü kaynağını base64 ile nasıl ayarlayabilirim

96

Görüntü kaynağını bir base64 kaynağına ayarlamak istiyorum, ancak çalışmıyor:

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

JavaScript

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

javascript base64

— poppel
kaynak

10

Base64 dizesindeki satır sonlarını kaldırırsanız çalışır. Fiddle güncellendi.

— Adriano Repetti

141

setAttributeBunun yerine kullanmayı deneyin :

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

Gerçek cevap: (Ve base64'teki satır sonlarını kaldırdığınızdan emin olun.)

— Kevin Boucher
kaynak

teşekkürler, 10 dakika içinde kabul edeceğim, setAttribute neden daha iyi?

— poppel

@poppel Önemli olduğunu sanmıyorum, ama kemanınızı düzeltmek için ilk girişimim kullanmak oldu setAttribute. Bu başarısız olduktan sonra, base64 kodlamasındaki satır sonlarını fark ettim. (Bir cevabı göndermek için acele ettiğim için src=, satır sonlarını

— düzelttikten

26

Görüntüyü Base64'ten ayarlamak için jQuery'yi kullanmayı tercih etmeniz durumunda:

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

— Faris Zacina
kaynak

5

@TruthSerum, bir React yığınına geçtiğimiz için onu kullanmıyoruz. Ama eğlence olsun diye, iddianızı kanıtlayacak istatistiksel kanıtınız var mı? JQuery kullanan eski web uygulamalarının olmadığını gerçekten düşünüyor musunuz? Yorumunuz kişisel fikrinize dayanıyor ve gerçekten benim kişisel zamanımı boşa harcıyor. Ayrıca projeyi kontrol ederseniz, hala korunur ve büyük bir takipçi tabanına sahiptir. github.com/jquery/jquery/commits/master

— Faris Zacina

5

Ayrıca @TruthSerum, yorumunuzu yayınlamadan önce kontrol etme şansınız olmadığından bazı istatistikler burada: google.com/trends/…

— Faris Zacina

Bu günlerde DOM'u güncellemek propyerine kullanılmalıdır attr. attryükleme sırasında orijinal sayfa durumunu ifade eder.

— 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
kaynak

4

Senin sorunun cr (carriage return)

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

kullanabilirsiniz:

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

— Matías Damonte
kaynak

Burada çözüm tam olarak nedir?

— AHH

Burada çözüm Baz 64 dan satır sonları (satır başları) kaldırmaktır

— Kevin Boucher