Atribut src

Atribut src (source) menentukan alamat berkas gambar yang dimuat browser. Nilainya berupa URL, dan seperti link pada Section Links dan Navigasi, URL itu bisa ditulis relatif terhadap halaman atau absolut dari skema sampai domain. Bedanya, kesalahan pada link menghasilkan halaman tujuan yang tidak terbuka, sedangkan kesalahan pada src menghasilkan kotak gambar gagal termuat yang terlihat langsung di tengah halaman.

Dua Bentuk Alamat #

Aturannya: jalur relatif dihitung dari posisi berkas HTML yang memuat gambar; jalur absolut berdiri sendiri dan selalu menunjuk alamat yang sama. Mekanisme pelengkapannya sudah kita bahas tuntas di chapter Absolute dan Relative URL — di sini kita cukup menerapkannya pada gambar.

Ringkasan polanya:

Struktur Folder dan Referensi yang Benar #

Perhatikan struktur proyek kedai Siti berikut:

kedai/
├── index.html
├── menu/
│   └── index.html
└── assets/
    ├── logo.svg
    └── kopi.jpg

Dari beranda (index.html), dua gambar dirujuk dengan masuk ke folder assets:

<img src="assets/logo.svg" alt="Kedai Kopi Siti">
<img src="assets/kopi.jpg" alt="Segelas kopi tubruk di atas meja kayu">

Dari halaman menu (menu/index.html), rujukan yang sama harus naik satu folder lebih dahulu:

<img src="../assets/logo.svg" alt="Kedai Kopi Siti">

Mari kita telaah perbedaannya:

1. assets/... dari index.html: folder assets berada satu tingkat di bawah beranda — cukup tulis nama foldernya.
2. ../assets/... dari menu/index.html: halaman berada di dalam folder menu/, sehingga ../ menaik ke kedai/ sebelum masuk assets/.
3. Konsistensi nama: folder dan berkas ditulis huruf kecil semua — kebiasaan yang akan menyelamatkan kita saat halaman diunggah.

Dua sumber berbeda pada satu halaman menghasilkan dua gambar berbeda — masing-masing src diambil sebagai satu request terpisah:

Pada demo, assets/logo.svg dan assets/kopi.jpg diganti placeholder SVG agar gambarnya langsung terlihat — pada berkas sungguhan, keduanya termuat dari folder proyek dengan mekanisme yang sama.

Saat Jalur Salah #

Satu karakter yang meleset — huruf, garis miring, titik — membuat browser tidak menemukan berkas. Tempat gambar kemudian menampilkan ikon gagal termuat beserta teks alt, dan panel Network di DevTools mencatat galat 404 (Not Found) lengkap dengan alamat yang dicoba. Membaca panel itu, sebagaimana dibahas di chapter DevTools, adalah cara tercepat menemukan jalur mana yang keliru.

Satu Gambar, Satu Request #

Mekanisme pemuatannya: browser membaca HTML lebih dulu, lalu mengirim satu request terpisah untuk setiap img yang ditemukannya. Konsekuensinya, halaman dengan 20 gambar berarti 20 request tambahan setelah HTML. Ukuran dan jumlah gambar menjadi penentu utama berat halaman — alasan yang akan kita pakai lagi di chapter Lazy Loading.

Ringkasan #

• src menerima jalur relatif (dihitung dari posisi halaman) maupun URL absolut.
• Rujukan dari halaman di folder berbeda membutuhkan penyesuaian ../.
• Jalur salah menghasilkan ikon gagal termuat, teks alt, dan galat 404 di panel Network.
• Setiap gambar dimuat sebagai satu request terpisah setelah HTML dibaca.

Chapter berikutnya membahas atribut kedua: alt, teks pengganti yang tampil justru saat gambar tidak bisa tampil.