Tanda <img> HTML

Definisi dan penggunaan

<img> Tag ini digunakan untuk menyisipkan imej ke halaman HTML.

Tekniknya, sebenarnya imej tidak disisipkan ke halaman web, tetapi imej dihubungkan ke halaman web.<img> Tag ini mencipta wadah untuk merujuk imej.

<img> Tag ini mempunyai dua atribut yang wajib:

  • src - Tetapkan laluan imej
  • alt - Jika imej tidak dapat dipaparkan disebabkan sebab yang mana-mana, tentukan teks pengganti imej.

Perhatian:Selain itu, pastikan selalu tentukan lebar dan ketinggian imej. Jika lebar dan ketinggian tidak ditentukan, halaman mungkin akan berkedip semasa memuat imej.

Petikan:Untuk menghubungkan imej ke dokumen lain, hanya perlu menempatkan <img> Tag yang disatukan di dalam <a> Dalam tag (lihat contoh di bawah).

Lihat juga:

Tutorial HTML:HTML 图像

Panduan Referensi DOM HTML:Objek Imej

Maklumat Tutorial CSS:Tetapkan gaya imej

Bacaan lanjut:Bagaimana untuk menggunakan imej dengan betul

Contoh

Contoh 1

Dalam contoh di bawah, kami memasukkan imej bunga tulip yang diambil oleh insinyur CodeW3C.com di Haiwan Bunga Shanghai di halaman kami:

<img src="tulip.jpg" alt="Haiwan Bunga Shanghai - Tulip" />

亲自试一试

上海鲜花港 - 郁金香

Contoh 2

Contoh lain bagaimana untuk memasukkan imej adalah:

<img src="dancer.png" alt="Penari" width="500" height="749">

亲自试一试

Petikan:Berikan lebih banyak contoh di bawah halaman dasar.

Atribut

Atribut Nilai Deskripsi
alt Teks Tetapkan teks pengganti imej.
crossorigin
  • anonymous
  • use-credentials
 Izinkan penggunaan imej dari laman web pihak ketiga yang diizinkan untuk akses melintasi domain bersama-sama dengan kanvas (canvas).
height Pixel Tetapkan ketinggian imej.
ismap ismap Tetapkan imej sebagai peta imej pihak berkhidmat.
loading
  • eager
  • lazy
 Tentukan sama ada penggunaan pelayar seharusnya memuat semula imej segera atau menangguhkan muat semula imej sehingga memenuhi beberapa syarat.
longdesc URL Tetapkan URL yang mengarah ke deskripsi imej terperinci.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Tetapkan maklumat rujukan yang digunakan untuk mendapatkan imej.
sizes Saiz Tetapkan saiz imej untuk susun halaman yang berbeza.
src URL Tetapkan laluan imej.
srcset URL-list Tentukan senarai fail imej yang digunakan dalam situasi berbeza.
usemap #mapname Tentukan imej sebagai peta imej pelanggan.
width Pixel Tentukan lebar imej.

Atribut global

<img> Tanda ini mendukung Atribut global dalam HTML。

Atribut acara

<img> Tanda ini mendukung Atribut acara dalam HTML。

Lebih banyak contoh

Contoh 3

Jadikan imej sepadan (gunakan CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

亲自试一试

Contoh 4

Tambahkan garisan sekeliling imej (gunakan CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

亲自试一试

Contoh 5

Tambahkan marjin kiri dan kanan imej (gunakan CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

亲自试一试

Contoh 6

Tambahkan marjin atas, bawah dan luar imej (gunakan CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

亲自试一试

Contoh 7

Bagaimana untuk memasukkan imej daripada folder lain atau laman web lain:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Pohon" width="150" height="161">

亲自试一试

Contoh 8

Bagaimana untuk menambah tautan ke imej:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

亲自试一试

Contoh 9

Bagaimana untuk membuat peta imej yang mempunyai kawasan yang boleh diklik. Setiap kawasan adalah tautan:

<img src="life.png" alt="Kehidupan" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Kopi" href="coffee.html">
</map>

亲自试一试

Baca lebih lanjut - Bagaimana untuk menggunakan imej dengan betul

Salah satu ciri paling menarik HTML dan XHTML adalah kemampuan untuk menyertakan imej di dalam teks dokumen, baik sebagai objek dalam dokumen (imej yang disertakan) maupun sebagai dokumen yang dapat diunduh melalui tautan atau sebagai latar belakang dokumen.

Menambahkan imej secara yang betul di dalam konten dokumen (iklan yang bergerak, gambar, penjelasan, lukisan, dll) akan membuat dokumen menjadi lebih hidup dan menarik, serta kelihatan lebih profesional, berisi informasi dan mudah dijalankan.

Walau bagaimanapun, jika digunakan terlalu banyak imej, dokumen akan menjadi lebur dan kekacauan, dan sukar untuk dibaca, pengguna akan mendapat banyak masa tunggu yang tidak perlu ketika memuat dan melihat halaman ini.

Baca artikel di bawah ini untuk mengedukasi dua format imej utama di Web: GIF dan JPEG, serta bagaimana untuk menggunakan imej dengan betul:

Pengaturan CSS baku

Buku lama kebanyakan pengguna akan memaparkan nilai baku berikut <img> 元素：

img {
  display: inline-block;
}

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持