Bagaimana cara mengatur Sumber gambar dengan base64

96

Saya ingin mengatur Sumber gambar ke sumber base64 tetapi tidak berhasil:

JSfiddle.net/NT9KB

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

JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
javascript base64 poppel
sumber
9
Ini berfungsi jika Anda menghapus jeda baris di string base64. Biola diperbarui.
Adriano Repetti

Jawaban:

140

Coba gunakan setAttributesebagai gantinya:

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

Jawaban sebenarnya: (Dan pastikan Anda menghapus pemisah baris di base64.)

Kevin Boucher
sumber
terima kasih, saya akan menerimanya dalam 10 menit, mengapa setAttribute lebih baik?
poppel
@poppel Saya rasa itu tidak penting, tapi usaha pertama saya untuk memperbaiki biola Anda adalah menggunakannya setAttribute. Setelah itu gagal saya melihat jeda baris dalam pengkodean base64. (Karena saya terburu-buru untuk mendapatkan jawaban yang dikirimkan, saya tidak mencobanya src=setelah memperbaiki jeda baris.)
Kevin Boucher
26

Jika Anda lebih suka menggunakan jQuery untuk mengatur gambar dari Base64:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
Faris Zacina
sumber
5
@TruthSerum kami tidak menggunakannya, karena kami beralih ke tumpukan React. Tetapi untuk bersenang-senang, apakah Anda memiliki bukti statistik untuk membuktikan klaim Anda? Apakah menurut Anda tidak ada aplikasi web lama yang menggunakan jQuery? Komentar Anda didasarkan pada pendapat pribadi Anda, dan benar-benar membuang-buang waktu pribadi saya. Juga jika Anda memeriksa proyek, itu masih dipertahankan dan memiliki basis pengikut yang besar. github.com/jquery/jquery/commits/master
Faris Zacina
5
Juga @TruthSerum berikut adalah beberapa statistik, karena Anda tidak sempat memeriksanya sebelum memposting komentar Anda: google.com/trends/…
Faris Zacina
Hari-hari ini, propsebaiknya digunakan sebagai pengganti attruntuk memperbarui DOM. attrmengacu pada status halaman asli saat memuat.
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
sumber
4

Masalah Anda adalah cr (kereta kembali)

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

kamu bisa memakai: 

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
Matías Damonte
sumber
Apa solusinya sebenarnya di sini?
AHH
Solusinya di sini adalah menghapus jeda baris (kereta kembali) dari Base 64.
Kevin Boucher