Saya ingin tahu apa yang dilakukan browser (Khususnya chrome) ketika Anda mengatur tag img src ke jalur yang mengembalikan string biner png vs. jika Anda akan memanggil titik akhir ini secara manual (Katakanlah menggunakan Ajax atau Axios) dan kemudian atur gambar src ke biner PNG ini secara manual. Karena hasil keduanya berbeda.

Saya menjalankan server Node/expressJs, yang memiliki file gambar yang kembali dari jalur images/.

router.get('images/', async function(req, res) {
  try {
    return await fs
      .createReadStream('./images/sample.png')
      .pipe(res);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

Panggilan API ini akan mengembalikan string biner PNG.

Skenario 1 - mengatur img src ke titik akhir tempat PNG hidup

Jika saya akan mengatur elemen img seperti itu <img src="http://localhost/images/"

Panggilan ini akan mengembalikan biner PNG dari server Node saya dan secara otomatis menampilkan semuanya dengan benar.

Skenario 2 - Menggunakan aksio untuk meminta PNG ini secara manual

Namun, jika saya akan menggunakan perpustakaan seperti axios, untuk memanggil titik akhir ini secara manual, saya akan mendapatkan kembali string biner PNG (Di tab 'jaringan' dev-tools chrome, ketika melihat data repsonse, saya bahkan melihat thumbnail pratinjau yang bagus gambar, jadi sesuatu di panel itu juga mengambil data PNG dengan benar dan menampilkannya dalam elemen img di sana). Tetapi jika saya akan mengambil data ini dan mencoba menyetelnya ke src dari tag gambar, saya perlu melakukan semua jenis konversi base64 sebelum berfungsi.

Jadi pertanyaan saya adalah - Apa algo internal elemen img, ketika menerima data gambar biner dari server?

0
ABD 12 Agustus 2019, 20:33

1 menjawab

Jawaban Terbaik

Tidak ada 'algoritma internal'. src adalah atribut HTML yang mengharapkan URI, apakah itu URI HTTP atau URI Base64. Alasan Anda harus mengonversi data ke Base64 jika Anda meminta gambar menggunakan JavaScript adalah karena ini adalah cara paling mudah untuk merepresentasikan data biner sebagai URI. Ketika browser melihat URI Base64, maka itu hanya mengubahnya kembali menjadi data biner dan menampilkannya.

1
laptou 12 Agustus 2019, 17:51