Bagaimana cara menampilkan gambar Base64 dalam HTML?
Saya mengalami masalah dalam menampilkan gambar Base64 sebaris.
Dapatkah seseorang mengarahkan saya ke arah yang benar?
<!DOCTYPE html>
<html>
<head>
<title>Display Image</title>
</head>
<body>
<img style='display:block; width:100px;height:100px;' id='base64image'
src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />
</body>
</html>
498
11
Dugaan saya tentu saja adalah data base64 yang sebenarnya, jika tidak, itu terlihat bagus bagi saya. Lihat [teka-teki ini][1] di mana skema serupa bekerja. Anda dapat mencoba menentukan set char.
Anda dapat mencoba base64 decoder ini untuk melihat apakah data base64 Anda benar atau tidak.
Anda perlu menentukan tipe Konten, Pengkodean Konten, dan charset yang benar seperti
sesuai dengan sintaksis skema URI data:
Jika anda memiliki PHP pada back-end, anda dapat menggunakan kode ini:
Pertama mengkonversi gambar anda ke Base64 (encode ke Base64). Anda dapat melakukannya secara online atau dengan script PHP.
Setelah konversi, anda akan mendapatkan hasil sebagai
Sekarang ini's mudah digunakan.
Anda harus hanya menempatkan itu di
src
gambar dan menentukan ada seperti di base64 encoded bentuk.Contoh:
Ini akan menampilkan gambar dari basis 64 data:
anda dapat menempatkan data anda secara langsung di url pernyataan seperti
dan untuk mendapatkan data gambar yang u dapat menggunakan fungsi php
jadi anda bisa copy paste nilai imageData dan paste langsung ke url anda dan menetapkan atribut src dari gambar anda
Karakter + yang muncul dalam URI data harus dikodekan sebagai %2B. Hal ini sama seperti pengkodean string lain dalam URI. Sebagai contoh, pemisah argumen (? dan &) harus dikodekan ketika URI dengan argumen dikirim sebagai bagian dari URI lain.
Tampaknya ada beberapa kesalahan dalam data anda URL.
Anda dapat menggunakan ini secara online base64 encode / base64 decode tool untuk menyandikan gambar untuk embedding: http://base64online.org/encode/
Periksa "Format sebagai Data URL" pilihan untuk format base64 data sebagai URL.
Coba yang satu ini juga:
Tidak dianjurkan untuk produksi seperti itu hanya kompatibel dengan browser modern.
Menyimpan Base64 image sebagai variabel dan menampilkannya menggunakan HTML dan JavaScript:
[Biola contoh][1], untuk mencobanya secara langsung.
PYTHON contoh: