Kursus yang disarankan:
Atribut src HTML <img>
Definisi dan penggunaan src
Wajib
Ada dua metode untuk mengatur URL gambar dalam atribut. src
Tentukan URL dalam atribut:
1. URL Absolut - Menautkan ke gambar eksternal yang disimpan di situs web lain. Contoh:
src="https://www.codew3c.com/images/img_girl.jpg"
Perhatian:Gambar eksternal mungkin dilindungi hak cipta. Jika Anda tidak memperoleh ijin untuk menggunakannya, maka Anda dapat melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat mengendalikan gambar eksternal; itu mungkin akan disingkirkan atau diubah dengan mendadak.
2. URL Relatif - Menautkan ke gambar yang disimpan di dalam situs web.
Di sini, URL tidak termasuk domain. Jika URL dimulai tanpa garis miring, maka itu berdasarkan halaman saat ini. Contoh:
src="img_girl.jpg".
Jika URL dimulai dengan garis miring, maka itu berdasarkan domain. Contoh:
src="/images/img_girl.jpg".
Petunjuk:Mungkin yang terbaik adalah menggunakan URL relatif. Jika Anda mengubah domain, maka tautan akan tetap berfungsi.
Perhatian:Jika browser tidak dapat menemukan gambar, maka akan menampilkan ikon tautan rusak dan teks alt.
Petunjuk:Untuk mengatur penyimpanan dokumentasi, penulis biasanya menyimpan file gambar di folder yang terpisah, dan biasanya menamai direktori seperti "pics" atau "images". Dalam tutorial CodeW3C.com online, insinyur kami menyimpan sebagian besar gambar yang sering digunakan di folder yang dinamai "i", "i" adalah singkatan untuk "images", hal ini memungkinkan untuk mempermudah pita sejauh mungkin.
Contoh
Dalam contoh di bawah, kami menambahkan gambar tulip yang diambil oleh insinyur CodeW3C.com di Taman Bunga Honghua di Shanghai, nama file gambar adalah "eg_tulip.jpg", disimpan di folder "i" di server. Ini adalah kode sumber:
<img src="/i/eg_tulip.jpg" />
Efek kode di atas:

Petunjuk:Anda dapat menggunakannya di alat tes online kamiCoba sendiriJika Anda mengganti nama berkas di contoh ini menjadi "eg_chinarose.jpg", Anda akan melihat gambar bunga mawar. Seperti ini:
Kode sumber:
<img src="/i/eg_chinarose.jpg" />
Efek kode di atas:

Syarat
<img src="URL">
Nilai atribut
Nilai | Deskripsi |
---|---|
URL |
Tentukan URL gambar. Nilai yang mungkin:
|
Dukungan browser
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Dukungan | Dukungan | Dukungan | Dukungan | Dukungan |