Jika gambar berkode base64 tidak dapat ditampilkan di elemen img HTML, mungkin ada beberapa alasan:
1. Kesalahan sintaksis: Atribut src di elemen img harus dimulai dengan "data:", diikuti dengan tipe MIME dan data gambar yang dikodekan base64. Jika format sintaksis ini salah, gambar tidak dapat ditampilkan secara normal.
2. Kesalahan tipe MIME: Jika tipe MIME yang ditentukan tidak cocok dengan format gambar sebenarnya, gambar tidak akan ditampilkan. Anda dapat menggunakan alat deteksi tipe MIME untuk mendeteksi tipe MIME yang benar pada suatu gambar.
3. Kesalahan data gambar: Data gambar yang dikodekan base64 mungkin rusak atau tidak lengkap, menyebabkan gambar gagal didekode dan ditampilkan secara normal. Anda dapat mencoba membuat ulang data gambar yang dikodekan base64.
3.1. Jika ada jeda baris pada pengkodean gambar base64 , elemen HTML img mungkin tidak ditampilkan dengan benar. Solusi untuk masalah ini adalah dengan menghapus baris baru dalam pengkodean base64.
Selama proses pengkodean base64, beberapa pembuat enkode menambahkan karakter baris baru di akhir setiap baris untuk memfasilitasi keluaran string panjang yang dikodekan base64. Namun, saat menggunakan gambar berkode base64 dalam HTML, jika ada jeda baris dalam pengkodean base64, browser tidak akan dapat mendekode dan menampilkan gambar dengan benar.
Untuk mengatasi masalah ini, Anda dapat menggunakan JavaScript untuk menghapus jeda baris dalam pengkodean base64, dan kemudian menetapkan pengkodean base64 yang dimodifikasi ke atribut src dari elemen img. Contoh kodenya adalah sebagai berikut:
var base64Str = "data:image/png;base64,iVBORw0KGg..."; // Pengkodean Base64 dengan jeda baris var img = new Image();
img.onload = fungsi () {
dokumen.body.appendChild(img);
};
img.src = base64Str.replace(/s/g, ""); // Hapus semua spasi dan baris baru Kode di atas akan membuat elemen img dan menetapkan pengkodean base64 yang dimodifikasi ke atribut src-nya. Gunakan ekspresi reguler /s/g untuk menghapus semua spasi dan baris baru guna memastikan pengkodean base64 tanpa karakter tambahan. Terakhir, tambahkan saja elemen img ke dokumen.
4. Masalah ukuran gambar: Jika gambar yang dikodekan base64 terlalu besar, browser mungkin tidak dapat memuat dan menampilkan gambar secara normal. Anda dapat mencoba memperkecil ukuran gambar atau mengompresi gambar untuk memperkecil ukuran gambar.
5. Masalah kebijakan keamanan: Beberapa browser mungkin mencegah pemuatan gambar berkode base64 karena kebijakan keamanan. Anda dapat mencoba metode pemuatan gambar lainnya, seperti mengunggah gambar ke server dan menggunakan referensi URL.
6. Masalah cache: Terkadang browser menyimpan gambar yang kedaluwarsa atau rusak dalam cache, sehingga menyebabkan gambar tidak ditampilkan dengan benar. Anda dapat mencoba membersihkan cache browser Anda atau menggunakan mode penjelajahan pribadi untuk memuat gambar.
7. Masalah lintas domain: Jika data gambar berkode base64 diambil dari nama domain atau protokol lain, data tersebut mungkin tunduk pada pembatasan lintas domain oleh browser dan tidak dapat ditampilkan secara normal. Anda dapat mencoba menyematkan data gambar ke halaman HTML, atau memuat gambar menggunakan nama domain atau protokol yang sama.
8. Masalah transmisi jaringan: Selama proses transmisi jaringan, jika data gambar berkode base64 hilang, rusak, atau diubah, gambar tidak akan ditampilkan secara normal. Anda dapat mencoba menggunakan protokol HTTPS untuk mengirimkan data gambar guna memastikan keamanan dan integritas data.
9. Metode pengkodean tidak konsisten: Jika metode pengkodean yang digunakan tidak konsisten, gambar tidak akan ditampilkan dengan benar. Misalnya, jika halaman HTML berkode UTF-8 berisi data gambar berkode base64 berkode GBK, gambar tidak akan didekodekan dan ditampilkan secara normal. Anda dapat mencoba menggunakan pengkodean yang sama untuk menghindari masalah ini.
Di atas adalah analisa detail penyebab elemen HTML img tidak dapat menampilkan gambar base64. Untuk informasi lebih lanjut mengenai elemen HTML img tidak dapat menampilkan gambar base64, harap perhatikan artikel terkait lainnya di downcodes.com!