HTML <img>elemen mewakili
gambar dalam dokumen.
|
|
|
Konten yang diizinkan
|
|
Tag kelalaian
|
Harus memiliki tag awal dan tidak boleh memiliki tag akhir.
|
Orang tua yang diizinkan
|
Setiap elemen yang menerima konten tersemat.
|
Peran ARIA yang diizinkan
|
Apa saja
|
Antarmuka DOM
|
|
Atribut
Penyejajaran
gambar sehubungan dengan konteks sekitarnya. Di
HTML5, gunakan properti floatdan / atau vertical-alignCSS sebagai gantinya.
alt
Atribut
ini mendefinisikan teks alternatif yang menjelaskan gambar. Pengguna
akan melihat teks ini ditampilkan jika URL gambar salah, gambar tidak berada
dalam salah satu format yang didukung , atau
jika gambar belum didownload.
Browser tidak selalu menampilkan gambar yang direferensikan oleh
elemen. Ini adalah kasus untuk browser non-grafis (termasuk yang
digunakan oleh orang-orang dengan gangguan penglihatan), jika pengguna memilih
untuk tidak menampilkan gambar, atau jika browser tidak dapat menampilkan gambar
karena tidak valid atau tipe yang tidak didukung . Dalam
kasus ini, browser dapat altmengganti gambar dengan teks yang didefinisikan dalam atribut elemen
ini . Anda harus, untuk alasan ini dan orang lain, memberikan nilai
yang berguna altbila memungkinkan.
Mengabaikan atribut ini sekaligus menunjukkan bahwa gambar
adalah bagian penting dari konten, dan tidak ada padanan tekstual yang
tersedia. Menetapkan atribut ini ke string kosong ( alt="")menunjukkan
bahwa gambar ini bukan bagian penting dari konten, dan
browser non-visual dapat menghilangkannya dari rendering.
Lebar
sebuah border disekeliling gambar. Di
HTML5, gunakan borderproperti CSS sebagai gantinya.
Atribut
yang disebutkan ini menunjukkan jika pengambilan gambar terkait harus dilakukan
dengan menggunakan CORS atau tidak. Gambar berkemampuan CORS dapat
digunakan kembali dalam <canvas>elemen tanpa " tercemar ." Nilai
yang diizinkan adalah:
anonymous
Origin:Permintaan lintas-asal
(yaitu dengan header HTTP) dilakukan. Tapi
tidak ada kredensial yang dikirim (yaitu, tidak ada cookie, tidak ada
sertifikat X.509, dan tidak ada otentikasi HTTP Basic yang dikirim). Jika
server tidak memberikan kredensial ke situs asal (dengan tidak mengatur Access-Control-Allow-Origin:header
HTTP), gambar akan tercemar dan penggunaannya dibatasi.
use-credentials
Origin:Permintaan lintas-asal
(yaitu, dengan header HTTP) yang dilakukan dengan kredensial dikirim (misalnya,
cookie, sertifikat, dan otentikasi HTTP Basic dilakukan). Jika
server tidak memberikan kredensial ke situs asal (melalui Access-Control-Allow-Credentials:header
HTTP), gambar akan tercemar dan penggunaannya dibatasi.
Bila
tidak ada, sumber daya diambil tanpa permintaan CORS (misalnya, tanpa mengirim Origin:header
HTTP), mencegah penggunaan non-tercemar pada <canvas>elemen. Jika
tidak valid, penanganannya seolah-olah digunakan kata kunci anonim yang disebutkan . Lihat atribut pengaturan CORS untuk
informasi tambahan.
height
Tinggi
intrinsik gambar dalam piksel. Dalam HTML
4 , tinggi bisa didefinisikan piksel atau sebagai persentase. Dalam HTML5 ,
bagaimanapun, nilainya harus dalam piksel.
Jumlah
piksel spasi putih untuk disisipkan ke kiri dan kanan gambar. Di
HTML5, gunakan marginproperti CSS sebagai gantinya.
ismap
Atribut Boolean ini
menunjukkan bahwa gambar adalah bagian dari peta sisi server. Jika
demikian, koordinat yang tepat dari sebuah klik dikirim ke server.
Atribut ini hanya diperbolehkan jika <img>elemen
adalah turunan <a>elemen dengan hrefatribut
yang valid .
longdesc
Tautan ke deskripsi foto
yang lebih rinci. Nilai yang mungkin adalah URL atau id elemen.
Nama
untuk elemen Ini didukung di HTML
4 hanya untuk kompatibilitas. Gunakan idatribut
sebagai gantinya.
referrerpolicy
String yang menunjukkan
perujuk mana yang digunakan saat mengambil sumber daya:
- no-referrer: yang Referer sundulan
tidak akan dikirim.
- no-referrer-when-downgrade: Tidak ada Referer header
yang dikirim saat menavigasi ke origin asal tanpa TLS (HTTPS). Ini adalah
perilaku default agen pengguna jika tidak ada kebijakan yang ditentukan.
- origin: yang Referersundulan akan
mencakup halaman skema asal ini, tuan rumah dan pelabuhan.
- origin-when-cross-origin: Menavigasi
ke asal lain akan membatasi data rujukan yang disertakan ke skema, host
dan port, sementara navigasi dari asal yang sama akan mencakup jalur penuh
perujuk.
- unsafe-url: yang Referersundulan akan
mencakup asal dan jalan, tapi tidak fragmen, password atau username. Kasus ini tidak
aman karena bisa mematikan asal dan jalur dari sumber daya yang dilindungi
TLS hingga asal-usul yang tidak aman.
Daftar satu atau lebih
string dipisahkan dengan tanda koma yang menunjukkan satu set ukuran sumber. Setiap
ukuran sumber terdiri dari:
- Sebuah
kondisi media Ini harus
dihilangkan untuk item terakhir.
- Sebuah
nilai ukuran sumber
Nilai
ukuran sumber menentukan ukuran tampilan yang diinginkan dari gambar. Agen
pengguna srcsetmenggunakan ukuran sumber saat ini untuk
memilih salah satu sumber yang disertakan oleh atribut
tersebut, bila sumber tersebut dijelaskan menggunakan deskriptor lebar (' w'). Ukuran
sumber yang dipilih mempengaruhi ukuran gambar intrinsik (ukuran tampilan
gambar jika tidak ada styling CSS yang diterapkan). Jika srcsetatribut
tidak ada, atau tidak mengandung nilai dengan wdeskriptor lebar ( ), maka sizesatribut
tidak berpengaruh.
src
URL
gambar Atribut ini wajib untuk <img>elemen. Pada
browser yang mendukung srcset, diperlakukan srcseperti gambar kandidat dengan
deskripsi kerapatan piksel 1xkecuali gambar dengan deskripsi
kerapatan piksel ini sudah didefinisikan srcset,atau
kecuali srcsetberisi wdeskriptor '.
Daftar satu atau lebih
string dipisahkan dengan tanda koma yang menunjukkan sekumpulan sumber gambar
yang mungkin digunakan oleh agen pengguna. Setiap
string terdiri dari:
- URL
ke gambar,
- Opsional,
spasi diikuti oleh salah satu dari:
·
Deskriptor lebar, atau bilangan bulat
positif yang langsung diikuti oleh ' w'. Deskriptor
lebar dibagi dengan ukuran sumber yang sizesdiberikan pada atribut
untuk menghitung kerapatan piksel efektif.
·
Deskripsi kerapatan piksel, yang merupakan
bilangan floating point positif yang langsung diikuti oleh ' x'.
Jika
tidak ada deskripsi yang ditentukan, sumber ditugaskan deskriptor default: 1x.
Tidak
benar untuk mencampur deskriptor lebar dan deskriptor kerapatan piksel pada
atribut yang sama srcset. Deskriptor duplikat (misalnya, dua sumber yang sama srcsetyang
dideskripsikan dengan ' 2x') juga tidak valid.
Agen pengguna memilih
salah satu sumber yang tersedia sesuai kebijakannya. Ini
memberi mereka kelonggaran yang signifikan untuk menyesuaikan pilihan mereka
berdasarkan hal-hal seperti preferensi pengguna atau kondisi bandwidth.
width
Lebar
intrinsik gambar dalam piksel. Dalam HTML
4 , baik persentase atau piksel adalah nilai yang dapat diterima. Di HTML5 ,
bagaimanapun, hanya piksel yang dapat diterima.
usemap
Catatan penggunaan : Anda tidak dapat menggunakan
atribut ini jika <img>elemen itu adalah keturunan dari satu <a>atau <button>elemen.
Jumlah
piksel spasi putih untuk disisipkan di atas dan di bawah gambar. Di
HTML5, gunakan margin properti CSS sebagai gantinya.
Format gambar yang didukung
Standar HTML tidak memberikan daftar format gambar yang harus
didukung, sehingga setiap agen pengguna mendukung seperangkat format yang
berbeda. Gecko mendukung:
·
GIF ,
termasuk GIF animasi
Interaksi dengan CSS
Mengenai CSS, <img>adalah elemen yang diganti . Ini
tidak memiliki garis dasar, jadi saat gambar digunakan dalam konteks format
inline dengan , bagian bawah gambar akan ditempatkan pada garis dasar wadah.vertical-align: baseline
Bergantung pada jenisnya, gambar mungkin memiliki lebar dan
tinggi intrinsik. Untuk beberapa jenis gambar, dimensi intrinsik tidak diperlukan. Gambar
SVG, misalnya, tidak memiliki dimensi intrinsik.
Kesalahan
Jika terjadi onerrorkesalahan saat
mencoba memuat atau merender gambar, dan pengendali
event telah dikonfigurasi untuk menangani erroracara
tersebut, pengendali event akan dipanggil . Hal ini
dapat terjadi dalam sejumlah situasi, termasuk:
·
The srcatribut
kosong atau null.
·
srcURL yang ditentukan sama
dengan URL halaman yang sedang dihubungi pengguna.
·
Gambar yang ditentukan rusak dengan cara
yang mencegahnya dimuat.
·
Metadata gambar yang ditentukan rusak
sedemikian rupa sehingga tidak mungkin untuk mengambil kembali dimensinya, dan
tidak ada dimensi yang ditentukan dalam atribut <img>elemen.
·
Gambar yang ditentukan dalam format tidak
didukung oleh agen
pengguna .
Contoh 1: teks alternatif
<Img
src = "mdn-logo-sm.png" alt = "MDN">
Contoh 2: Tautan gambar
<a
href="/"> MDN <img src = "mdn-logo-sm.png" alt =
"MDN"> </a>
Contoh 3: srcsetMenggunakan atribut
The srcatribut adalah 1xkandidat di agen pengguna yang
mendukung srcset.
<Img
src = "mdn-logo-sm.png"
alt = "MDN"
srcset = "mdn-logo-HD.png 2x">
Contoh 4: Menggunakan srcsetdan sizesatribut
The srcatribut diabaikan dalam agen pengguna yang mendukung srcsetbila
menggunakan ' wdeskriptor'. Bila kondisi (min-width: 600px)media
cocok, gambarnya akan lebar 200px, jika tidak maka akan lebar 50vw (50% lebar
viewport).
<Img
src = "clock-demo-thumb-200.png"
alt = "Jam"
srcset = "jam-demo-thumb-200.png 200w,
jam-demo-thumb-400.png 400w"
ukuran = "(mnt -width: 600px) 200px, 50vw ">
Spesifikasi
Spesifikasi
|
Status
|
Komentar
|
|
|
Draft Kerja
|
Ditambahkan referrerpolicyatribut.
|
|
|
Standar Hidup
|
|
|
|
Rekomendasi
|
|
|
|
Rekomendasi
|
|
Kompatibilitas browser
|
|
Chrome
|
Tepi
|
Firefox
(Gecko)
|
Internet
Explorer
|
Opera
|
Safari
(WebKit)
|
Dukungan
dasar
|
(Iya nih)
|
(Iya nih)
|
(Iya nih)
|
(Iya nih)
|
(Iya nih)
|
(Iya nih)
|
srcset
|
34.0
|
(Iya nih)
|
|
Tidak ada dukungan
|
21
|
7.1
|
referrerpolicy
|
46,0 [1]
|
Tidak ada dukungan
|
|
?
|
?
|
?
|
onerror Event handler
|
(Iya nih)
|
?
|
|
?
|
(Iya nih)
|
(Iya nih)
|
Atribut
tanpa usemaplengan
|
58
|
?
|
?
|
?
|
45
|
?
|
[1] Dilaksanakan sebagai referrerpolicydan di
belakang bendera.
[2] Dilaksanakan di belakang pilihan.
