Bagaimana cara mengatur Sumber gambar dengan base64

96

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

<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

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