Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Bagaimana untuk Membenamkan Imej PNG Terus ke Halaman HTML Tanpa Pautan Luaran?

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

Barbara Streisand
Barbara Streisandasal
2024-10-31 16:59:02400semak imbas

How to Embed PNG Images Directly into HTML Pages Without External Links?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn