Bagaimana Anda membuat gambar terlihat di html?

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" />

<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" />

<img src="assets/image.jpeg" />

Jalur relatif juga bisa naik folder dengan menggunakan pola

<img src="image.jpeg" />

html-project
├── assets
│   └── image.jpeg
└── pages
    └── index.html

File

<img src="image.jpeg" />

<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

html-project
├── assets
│   └── image.jpeg
└── index.html

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

html-project
├── assets
│   └── image.jpeg
└── index.html

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

Mengapa dalam HTML gambar tidak ditampilkan?

Bagaimana cara menampilkan gambar dalam HTML dengan URL?

In order to put a simple image on a web page, we use the element. This is a void element (meaning, it cannot have any child content and cannot have an end tag) that requires two attributes to be useful: src and alt . The src attribute contains a URL pointing to the image you want to embed in the page.