Bagaimana untuk Membenamkan Imej PNG Terus ke Halaman HTML Tanpa Pautan Luaran?

Membenamkan Imej PNG dalam Halaman HTML

Dalam alam digital, imej memainkan peranan penting dalam meningkatkan pengalaman pengguna dan menyampaikan maklumat visual. Satu soalan biasa yang dihadapi oleh pembangun web ialah cara membenamkan imej Grafik Rangkaian Mudah Alih (PNG) terus ke dalam halaman HTML, tanpa memautkannya secara luaran.

Membenamkan Imej dengan Pengekodan Base64

Untuk membenamkan imej PNG dalam HTML, kami boleh menggunakan pengekodan Base64. Proses ini menukar data imej binari kepada rentetan yang boleh dibenamkan ke dalam kod HTML.

Beberapa pengekod Base64 dalam talian boleh membantu dengan tugas ini. Satu alat yang disyorkan terdapat di http://www.greywyvern.com/code/php/binary2base64.

Selepas pengekodan imej, anda boleh membenamkannya menggunakan salah satu daripada dua kaedah:

1. Menggunakan Sifat Imej Latar Belakang CSS:

Buat elemen div dan tetapkan sifat imej latar belakangnya kepada rentetan berkod Base64. Contohnya:

<code class="css">div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

2. Menggunakan Tag:

Sebagai alternatif, anda boleh menggunakan tag untuk membenamkan imej secara langsung. Atribut src mengambil rentetan yang dikodkan sebagai nilainya. Contohnya:

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

Dengan menggunakan kaedah ini, anda boleh berjaya membenamkan imej PNG ke dalam halaman HTML, membenarkannya dipaparkan tanpa rujukan fail luaran.

Atas ialah kandungan terperinci Bagaimana untuk Membenamkan Imej PNG Terus ke Halaman HTML Tanpa Pautan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!