Rumah > pembangunan bahagian belakang > tutorial php > Bagaimana untuk Membenamkan Imej PNG Terus ke dalam HTML Tanpa Fail Luaran?

Bagaimana untuk Membenamkan Imej PNG Terus ke dalam HTML Tanpa Fail Luaran?

Mary-Kate Olsen
Lepaskan: 2024-10-28 20:35:31
asal
463 orang telah melayarinya

How to Embed PNG Images Directly into HTML Without External Files?

Membenamkan Imej PNG ke dalam Halaman HTML

Tugas membenamkan imej PNG ke dalam halaman HTML tanpa memaut ke fail imej menimbulkan persoalan : bagaimana untuk memasukkan data imej terus ke dalam HTML?

Membenamkan dengan Pengekodan Base64

Pengekodan Base64 menyediakan penyelesaian untuk membenamkan imej ke dalam HTML. Terdapat pelbagai pengekod Base64 dalam talian yang tersedia, tetapi disyorkan untuk menggunakan pengekod yang teguh seperti yang terdapat di http://www.greywyvern.com/code/php/binary2base64.

Alat ini membentangkan dua pilihan pembenaman utama : menggunakan CSS atau tag.

Pembenaman CSS

Dalam CSS, pembenaman boleh dicapai seperti berikut:

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

Pembenaman Teg

Sebagai alternatif, tag boleh digunakan:

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

Dengan menggunakan pengekodan Base64, anda boleh membenamkan imej PNG terus ke halaman HTML, membolehkan paparan imej tanpa memerlukan fail imej luaran.

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

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan