{"id":24793,"date":"2025-12-22T10:00:02","date_gmt":"2025-12-22T03:00:02","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=24793"},"modified":"2026-02-13T17:18:37","modified_gmt":"2026-02-13T10:18:37","slug":"website-bisa-tampil-tapi-gambar-tidak-tampil","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/website-bisa-tampil-tapi-gambar-tidak-tampil\/","title":{"rendered":"Website Bisa Tampil, Tapi Gambar Tidak Tampil"},"content":{"rendered":"\n

Setelah Anda mengunggah file website ke hosting atau server, kemudian mencoba membukanya di web browser<\/em>, semuanya tampil dengan baik kecuali satu masalah, yaitu gambar tidak tampil. Halaman hanya menampilkan kotak kosong di tempat seharusnya gambar berada. Pengalaman ini pasti membuat frustrasi, terutama jika Anda sudah yakin sudah mengunggah file gambar dengan benar.<\/p>\n\n\n\n

Masalah ini sebenarnya sangat umum terjadi pada website baru yang baru dipindahkan ke hosting, atau saat mengubah konfigurasi website. Berdasarkan pengalaman tim support teknis Rumahweb yang telah menangani ribuan kasus serupa, masalah gambar tidak tampil biasanya disebabkan oleh beberapa faktor teknis yang mudah diatasi. <\/p>\n\n\n\n

Pada artikel ini, kami akan membahas secara detail penyebab dan solusi untuk mengatasi masalah ini.<\/p>\n\n\n\n

Mengapa Gambar Tidak Tampil Padahal Website Bisa Diakses?<\/h2>\n\n\n\n

Sebelum masuk ke solusi, penting untuk memahami alasan di balik masalah ini. Ketika Anda mengakses website, browser<\/em> menjalankan perintah HTML yang memberi tahu browser di mana letak file gambar. Jika browser tidak menemukan file di lokasi yang ditunjuk, maka gambar tidak akan ditampilkan, meskipun website itu sendiri bisa diakses dengan baik.<\/p>\n\n\n\n

Perbedaan antara website yang tampil tapi gambar tidak adalah karena file HTML dapat ditampilkan tanpa bergantung pada file gambar, sementara file gambar memerlukan path referensi yang tepat. Jadi, jika path atau lokasi gambar salah, hanya gambar yang tidak akan muncul, bukan seluruh website.<\/p>\n\n\n\n

Penyebab Umum Gambar Tidak Tampil dan Solusinya<\/h2>\n\n\n\n

Ada beberapa penyebab utama mengapa gambar tidak tampil di website Anda. Kami akan membahas masing-masing dengan penjelasan teknis dan solusi langsung yang bisa Anda implementasikan.<\/p>\n\n\n\n

1. Penamaan File Gambar Tidak Sesuai (Case Sensitive<\/em>)<\/h3>\n\n\n\n

Sistem operasi Linux, yang digunakan oleh semua server Rumahweb dan sebagian besar hosting profesional, menganggap huruf besar dan huruf kecil sebagai karakter yang berbeda. Ini disebut “case sensitive<\/a><\/em>“. Berbeda dengan Windows, yang tidak membedakan antara huruf besar dan kecil dalam nama file.<\/p>\n\n\n\n

Misalkan Anda memiliki file gambar bernama logo.jpg. Jika di kode HTML Anda menulis:<\/p>\n\n\n\n

<img src=\"Logo.jpg\" alt=\"Logo Perusahaan\" \/><\/code><\/pre>\n\n\n\n
atau <\/p>\n\n\n\n
<img src=\"logo.JPG\" alt=\"Logo Perusahaan\" \/><\/code><\/pre>\n\n\n\n
Maka gambar tidak akan tampil, karena server Linux menganggap Logo.jpg, logo.jpg, dan logo.JPG sebagai tiga file yang berbeda. File yang benar-benar ada adalah logo.jpg (huruf kecil), sementara browser mencari Logo.jpg atau logo.JPG.<\/p>\n\n\n\n
Solusinya, anda bisa melakukan hal berikut ini: <\/p>\n\n\n\n
    \n
  1. Standardisasi penamaan file<\/strong>: Gunakan huruf kecil untuk semua nama file gambar. Contohnya: logo.jpg, banner-produk.png, icon-facebook.svg.<\/li>\n\n\n\n
  2. Periksa kode HTML Anda<\/strong>: Pastikan path gambar dalam tag <img> persis sama dengan nama file, termasuk huruf besar dan kecilnya.<\/li>\n\n\n\n
  3. Gunakan tools untuk memeriksa<\/strong>: Jika Anda menggunakan WordPress, install plugin seperti Broken Link Checker<\/em> untuk menemukan gambar yang path-nya salah.<\/li>\n<\/ol>\n\n\n\n
    Berikut adalah contoh kode yang benar. <\/p>\n\n\n\n
    <!-- File asli: logo.jpg (huruf kecil) -->\n<img src=\"images\/logo.jpg\" alt=\"Logo Perusahaan\" \/>\n\n<!-- Pastikan path dan nama file persis sama -->\n<img src=\"images\/logo.jpg\" alt=\"Logo Perusahaan\" \/>  <!-- Benar -->\n<img src=\"images\/Logo.jpg\" alt=\"Logo Perusahaan\" \/>  <!-- Salah --><\/code><\/pre>\n\n\n\n
    2. Lokasi Direktori Gambar Tidak Benar<\/strong><\/h3>\n\n\n\n
    Path<\/em> adalah alamat atau lokasi file dalam struktur folder server Anda. Path yang salah adalah salah satu penyebab paling umum gambar tidak tampil. Sebagai contoh, jika gambar tersimpan di folder assets\/images\/<\/em>, tetapi HTML mencari di folder images\/ saja, browser tidak akan menemukan file tersebut.<\/p>\n\n\n\n
    Berikut adalah cara mengecek lokasi directory gambar pada website:<\/p>\n\n\n\n
      \n
    1. Gunakan FTP Client<\/strong>: Akses server Anda menggunakan aplikasi FTP seperti FileZilla<\/em> atau WinSCP<\/em>. Lihat struktur folder dan catat lokasi folder tempat gambar disimpan.<\/li>\n\n\n\n
    2. Bandingkan dengan path HTML<\/strong>: Buka file HTML atau template website Anda, dan bandingkan path gambar dalam tag <img> dengan lokasi sebenarnya di server.<\/li>\n<\/ol>\n\n\n\n
      Berikut adalah contoh struktur folder yang umum digunakan: <\/p>\n\n\n\n
      \"Website<\/a><\/figure>\n\n\n\n
      Jika file index.html ingin memanggil gambar logo.jpg, path yang benar adalah:<\/p>\n\n\n\n
      <img src=\"assets\/images\/logo.jpg\" alt=\"Logo\" \/><\/code><\/pre>\n\n\n\n
      Panduan Path Relatif vs Absolut:<\/strong><\/p>\n\n\n\n