Debugging Images dan Links

Dua keluhan paling sering sampai kepada pembuat halaman: “gambar tidak muncul” dan “link tidak membawa ke mana-mana”. Keduanya jarang disebabkan markup yang rumit — hampir selalu nilai src atau href yang menunjuk ke berkas dengan nama berbeda. DevTools punya panel yang menunjukkan kegagalan tersebut secara pasti, lengkap dengan nama berkas yang dicari browser.

Chapter ini menelusuri gambar terlebih dulu, lalu link, lalu merangkum keduanya dalam satu tabel gejala.

Gambar Tidak Muncul #

Empat langkah menelusuri gambar yang gagal tampil:

1. Buka panel Network, klik filter Img, lalu muat ulang halaman agar daftar permintaan terisi.
2. Cari baris gambar yang bermasalah dan baca statusnya: 404 berarti berkas tidak ditemukan — jalur salah.
3. Periksa halamannya: teks alt yang tampil di tempat gambar adalah gejala klasik src gagal dimuat.
4. Buka Console — pesan seperti Failed to load resource: 404 menegaskan nama berkas yang gagal.

Penyebab 404 umumnya salah satu dari tiga: nama folder berbeda (aset atau assets), huruf besar-kecil berbeda, atau nama berkas salah tik. Huruf besar-kecil adalah kasus paling sunyi: Windows dan macOS mencocokkan nama berkas tanpa membedakan huruf besar-kecil, sementara mayoritas server web membedakannya — halaman tampil lancar di komputer kita, lalu gagal setelah diunggah.

Link Buntu #

Tiga langkah menelusuri link yang tidak bekerja:

1. Klik link; bila tidak terjadi apa pun, periksa href di panel Elements: nilai kosong atau # memang tidak membawa ke mana-mana.
2. Arahkan kursor ke link tanpa mengklik — status bar browser di pojok kiri bawah menampilkan tujuan href; cara tercepat memastikan target sebelum mengeklik.
3. Bila link menuju halaman 404, buka panel Network dengan filter Doc, klik link, lalu baca permintaan yang gagal.

Tabel: Gejala, Penyebab, Solusi #

Dua gejala paling sering pada tabel di atas bisa dijumpai langsung. Kedua elemen berikut benar-benar gagal bekerja: gambar karena src-nya menunjuk berkas yang tidak ada, link karena href-nya hanya kres. Tekan link-nya beberapa kali dan perhatikan juga area gambar di atasnya:

Berkas aset/logo-kedai.png memang tidak tersedia pada demo — itulah intinya: src menunjuk berkas yang tidak ada, dan browser menampilkan kegagalannya apa adanya.

Pada gambar, ikon gagal termuat tampil di tempatnya dan teks alt menggantikan posisi informasi — persis baris pertama tabel gejala. Pada link, klik tidak membawa ke mana-mana: nilai # memang bukan tujuan, sehingga tidak ada permintaan halaman baru yang bisa diperiksa. Keduanya gejala nyata yang ditelusuri lewat panel Network, Console, dan pemeriksaan href pada panel Elements seperti langkah-langkah di atas.

Studi Kasus: Satu Huruf yang Berbeda #

Logo Kedai Kopi Siti tidak muncul setelah halaman diunggah, padahal tampil sempurna selama pengembangan. Struktur folder di server:

kedai/
├── index.html
└── aset/
    └── Logo-Kedai.png

Markupnya:

<img src="aset/logo-kedai.png" alt="Logo Kedai Kopi Siti">

Panel Network dengan filter Img menampilkan permintaan logo-kedai.png berstatus 404. Diagnosis: berkas di server bernama Logo-Kedai.png dengan huruf L besar, sementara jalur kita menulis huruf kecil. Sistem berkas komputer lokal tidak membedakan keduanya; server membedakan. Perbaikannya menyalin nama berkas persis:

<img src="aset/Logo-Kedai.png" alt="Logo Kedai Kopi Siti">

Mari kita telaah perbaikannya:

1. Baris 1 (src="aset/Logo-Kedai.png"): jalur kini menyalin nama berkas karakter demi karakter — huruf besar pada L dipertahankan.
2. Aturan praktis di baliknya: saat menamai berkas untuk web, gunakan huruf kecil semua tanpa spasi, lalu tulis jalur dengan aturan yang sama — dua kebiasaan yang menghapus satu keluarga galat 404 sekaligus.

Gambar dan link adalah rujukan: nilai atributnya menunjuk ke berkas lain, dan satu karakter yang berbeda sudah cukup untuk memutusnya. Chapter penutup section ini merangkum seluruh pemeriksaan menjadi satu daftar pra-terbit.