Cara Mengatasi Gambar yang Tidak Muncul di Web – Saat kita sedang mempelajari coding entah itu mulai dari HTML, CSS, PHP atau yang lainnya, pasti akan ada beberapa hal atau kendala yang dihadapi. Salah satu dari berbagai macam masalah adalah gambar yang tidak muncul di web.

Hal ini seringkali terjadi pada saat awal-awal kita masih mempelajari coding. Oleh karena itu, DUMET School akan memberitahu bagaimana cara mengatasi gambar yang tidak muncul di web mulai dari HTML & CSS juga pada PHP.

Langsung mulai saja ya!

Cara Mengatasi Gambar yang Tidak Muncul di HTML CSS

Dalam HTML dan CSS, kita perlu banyak memperhatikan penulisan coding dan juga typo.

1. Perhatikan penulisan kode HTML dan CSS-nya

Perhatikan penulisan kode dan juga tag HTML-nya, karena bisa saja kurang tepat seperti:

  • kurang huruf
  • salah huruf
  • kurang penutup tag

Secara default, kode untuk menampilkan gambar dengan HTML adalah sebagai berikut:

<img src="images/logo-dumet-school.jpg" width="500">

Dan begitu pula dengan CSS. Perhatikan penulisannya, apakah ada:

  • typo
  • salah pemanggilan atribut
  • kurang titik koma
  • kurang tutup kurawal
  • dan lain-lain

Secara default, kode untuk menampilkan gambar dengan CSS adalah sebagai berikut:

body{
background: url(images/dumet-bg.jpg);
}

2. Perhatikan penulisan nama file dan tipe gambarnya

Pastikan nama file gambar dan ekstensi atau format atau tipe file gambar sudah benar saat diketikkan di HTML atau CSS.

mengatasi gambar tidak muncul di web

3. Perhatikan folder lokasi gambarnya

Perhatikan kembali lokasi folder peletakkan gambar. Selain itu perhatikan juga nama folder gambarnya. Jika sudah benar, seharusnya tidak akan ada error dan gambar akan muncul.

Cara Mengatasi Gambar yang Tidak Muncul di PHP

Sama seperti pada bagian HTML dan CSS, kita juga bisa saja mengalami gambar yang tidak muncul saat sedang menggunakan kode PHP.

Dan sebenarnya, untuk mengatasi masalahnya juga hampir sama dengan HTML dan CSS. Kebanyakan ada masalah typo, kurang huruf, kurang tutup tag, dan lain-lain.

Tapi, agar lebih jelas dan paham, DUMET School akan coba jabarkan satu per satu.

1. Perhatikan lokasi folder gambar

Sama seperti pada HTML dan CSS, penempatan gambar pada folder juga sering menjadi masalah. Jadi, pastikan kamu benar-benar tahu:

  • dimana lokasi gambar berada
  • apa nama foldernya
  • penulisan nama dan ekstensi gambar

2. Perhatikan kode atau syntax upload gambar

Sebagai contoh, kode untuk upload gambar dengan PHP adalah sebagai berikut:

$file_name = $_FILES["gambar"]["name"];
$tmp_name = $_FILES["gambar"]["tmp_name"];
move_uploade_file($tmp_name, "images/".$file_name);

$db->query("INSERT INTO rsh_upload_image VALUES('', '$name', '$file_name')");

Dan kode untuk menampilkan gambarnya adalah sebagai berikut:

<img src="images/<?= $row['gambar'] ?>">

3. Perhatikan nama field di database

Dari kode yang sudah ditulis, perhatikan juga nama field dalam database. Apakah sudah benar namanya, databasenya dan juga lihat coding koneksi ke databasenya. Apa benar memang memanggil nama database dimana field gambar akan ditampilkan.

4. Tambahkan atribut enctype di form

Jika semuanya sudah dicoba tapi saat menggunakan coding upload gambar tidak muncul gambarnya, cobalah untuk menambahkan atribut enctype pada tag form. Kodenya adalah sebagai berikut:

<form method="post" enctype="multipart/form-data">

Bagaimana? Sudah dicoba semuanya? Apakah berhasil menampilkan gambar? Mudah-mudahan sekarang sudah berhasil muncul ya! 🙂

Semoga artikel ini bermanfaat! Kalau kamu ingin belajar coding atau belajar website dengan lebih dalam dan detail, kamu bisa coba ambil paket kursus website di DUMET School.

Ada banyak pilihan paket yang bisa disesuaikan dengan kebutuhanmu. Dan meskipun kamu masih awam, tenang saja! Kamu akan dapat materi yang benar-benar terstruktur dan benar-benar dari nol.