Setiap gambar dalam HTML dirender dengan menggunakan tag <img> dengan sumber gambar yang ditentukan dalam atribut src
Anda dapat menempatkan jalur relatif atau jalur absolut ke atribut src tergantung di mana Anda menempatkan gambar
Jika gambar Anda disimpan secara lokal di folder di samping lokasi dokumen HTML Anda, Anda dapat menggunakan jalur relatif
Misalkan Anda memiliki struktur folder berikut di proyek Anda
html-project ├── image.jpeg └── index.html
Kemudian di dalam file <img src="image.jpeg" /> 3, Anda dapat menampilkan gambar menggunakan tag berikut
<img src="image.jpeg" /> _
Ketika gambar Anda satu folder ke bawah seperti pada struktur berikut
html-project ├── assets │ └── image.jpeg └── index.html
Maka Anda perlu menambahkan folder <img src="image.jpeg" /> _4 ke atribut src sebagai berikut
<img src="assets/image.jpeg" />
Jalur relatif juga bisa naik folder dengan menggunakan pola <img src="image.jpeg" /> 6, jadi jika Anda memiliki struktur berikut
html-project ├── assets │ └── image.jpeg └── pages └── index.html
File <img src="image.jpeg" /> 3 dapat menjangkau gambar menggunakan atribut src berikut
<img src="../assets/image.jpeg" /> _
Saat Anda memiliki jalur yang benar, jangan lupa untuk memeriksa ekstensi gambar dan pastikan itu sama antara src dan gambar sebenarnya
Terkadang gambar dengan ekstensi html-project ├── assets │ └── image.jpeg └── index.html 0 ditulis ke atribut src sebagai ekstensi html-project ├── assets │ └── image.jpeg └── index.html 2
Setelah jalur src gambar sudah benar, maka Anda perlu memeriksa apakah gambar tersebut dapat diakses oleh server Anda
Perlu diingat bahwa jika Anda menggunakan server pengembangan lokal seperti XAMPP, WAMP, atau MAMP, maka gambar tersebut harus berada di dalam folder pengembangan
Untuk WAMP, gambar harus berada di dalam folder html-project ├── assets │ └── image.jpeg └── index.html 4, sedangkan untuk XAMPP dan MAMP Anda harus meletakkan gambar di dalam folder html-project ├── assets │ └── image.jpeg └── index.html 5
Terakhir, jika Anda menggunakan jalur absolut, pastikan Anda tidak menempatkan jalur hard disk lokal ke atribut src
Contoh berikut tidak akan berfungsi saat Anda menempatkan situs web online
<img src="file:///Users/nsebhastian/html-project/assets/image.jpeg" />
Setelah Anda memverifikasi bahwa image dapat diakses dalam pengembangan, image mungkin masih hilang dari situs produksi Anda karena cache
Mari kita lihat cara menghapus cache selanjutnya
Periksa cache untuk memperbaiki gambar tidak muncul
Salah satu penyebab gambar tidak muncul pada sebuah website adalah karena browser atau cache server masih menyajikan halaman HTML lama kepada pengunjung
Ini hanya terjadi bila Anda merevisi file HTML yang sudah dipublikasikan untuk menyertakan gambar baru di halaman
Menghapus cache browser mungkin berbeda tergantung pada browser yang Anda gunakan
Jika Anda menggunakan Chrome, Anda dapat mengosongkan cache dengan membuka menu alat pengembang lalu klik kanan ikon muat ulang