Mengapa gambar png saya tidak muncul di html?

Pepatah lama mengatakan bahwa "sebuah gambar bernilai seribu kata. " Slogan ini bersinar di web, di mana rentang perhatian terkenal pendek—gambar yang tepat dapat membuat atau menghancurkan situs dengan menarik perhatian yang tepat dan menarik pengunjung halaman

Namun ketika grafik gagal dimuat, itu membuat desain terlihat rusak dan, dalam beberapa kasus, dapat menurunkan pengalaman pengguna di situs tersebut. "Seribu kata" yang dikirim oleh gambar rusak itu tentu saja bukan kata-kata positif

1. Jalur File Salah

Saat menambahkan gambar ke file HTML atau CSS situs, Anda harus membuat jalur ke lokasi di struktur direktori tempat file tersebut berada. Ini adalah kode yang memberi tahu browser tempat mencari dan mengambil gambar. Dalam kebanyakan kasus, ini akan berada di dalam folder bernama gambar. Jika jalur ke folder ini dan file di dalamnya salah, gambar tidak akan dimuat dengan benar karena browser tidak akan dapat mengambil file yang benar. Itu akan mengikuti jalur yang Anda perintahkan, tetapi itu akan menemui jalan buntu dan, alih-alih menampilkan gambar yang sesuai, akan muncul kosong

2. Nama File Salah Eja

Saat Anda memeriksa jalur file untuk file Anda, pastikan Anda mengeja nama gambar dengan benar. Nama yang salah atau salah eja adalah penyebab paling umum dari masalah pemuatan gambar

3. Ekstensi File Salah

Dalam beberapa kasus, Anda mungkin memiliki nama file yang dieja dengan benar, tetapi ekstensi file mungkin salah. Jika gambar Anda adalah a. jpg, tetapi HTML Anda mencari file. png, akan ada masalah. Gunakan jenis file yang benar untuk setiap gambar, lalu rujuk ekstensi yang sama di kode situs web Anda.  

Juga, cari sensitivitas huruf besar-kecil. Jika file Anda diakhiri dengan. JPG, dengan huruf kapital semua, tetapi referensi kode Anda. jpg, semua huruf kecil, server web tertentu melihat keduanya berbeda, meskipun keduanya adalah kumpulan huruf yang sama. Sensitivitas kasus penting

Praktik terbaiknya adalah selalu menyimpan file dengan huruf kecil semua. Hal itu memungkinkan kita untuk selalu menggunakan huruf kecil dalam kode kita, menghilangkan satu kemungkinan masalah yang mungkin terjadi pada file gambar kita

4. File Hilang

Jika jalur ke file gambar Anda sudah benar, dan nama serta ekstensi file juga bebas dari kesalahan, periksa apakah file tersebut telah diunggah ke server web. Mengabaikan mengunggah file ke server itu saat situs diluncurkan adalah kesalahan umum yang mudah diabaikan

Unggah gambar-gambar itu, segarkan halaman web Anda, dan itu akan segera menampilkan file seperti yang diharapkan. Anda juga dapat mencoba menghapus gambar di server dan mengunggahnya kembali. Terkadang file rusak selama transfer (mis. g. , melalui teks daripada transfer biner selama FTP), jadi metode "hapus dan ganti" ini terkadang membantu

5. Situs Web yang Menghosting Gambar Sedang Turun

Anda biasanya menghosting gambar yang digunakan situs Anda di server Anda sendiri, tetapi dalam beberapa kasus, Anda mungkin menggunakan gambar yang dihosting di tempat lain. Jika situs yang menghosting gambar itu mati, gambar Anda juga tidak akan dimuat

6. Masalah Pemindahan

Baik file gambar dimuat dari domain eksternal atau dari domain Anda sendiri, selalu ada kemungkinan terjadi masalah transfer untuk file tersebut saat pertama kali diminta oleh browser. Masalah ini seharusnya tidak umum terjadi (jika ya, Anda mungkin perlu mencari penyedia hosting baru), tetapi dapat terjadi dari waktu ke waktu.

Alasan umum untuk kesalahan ini adalah server kewalahan dan tidak dapat melayani semua aset halaman dengan cukup cepat sebelum waktu permintaan habis. Anda akan melihat masalah ini lebih umum dengan server web virtual yang disediakan dengan harga murah yang berjuang untuk menangani situs yang lebih rumit dan sarat skrip. Jika masalah ini sering terjadi, pertimbangkan untuk meningkatkan kemampuan server atau cari host baru

7. Masalah Basis Data

Aplikasi web dinamis modern, seperti WordPress, mengandalkan database untuk menyimpan informasi tentang semua yang ada di situs, termasuk gambar. Jika situs Anda gagal memuat gambar, ada kemungkinan database mengalami beberapa masalah

Ada banyak cara masalah basis data dapat terjadi. Aplikasi Anda bahkan mungkin tidak terhubung ke database, karena sedang down atau tidak dapat dijangkau di server lain. Sesuatu mungkin telah rusak pada basis data itu sendiri, atau informasi pengguna basis data Anda berubah, membuat Anda keluar. Bahkan perubahan pengaturan sederhana dapat memicu konsekuensi yang tidak diinginkan yang mengubah database atau membuatnya tidak dapat dijangkau. Periksa log server untuk melihat apakah database mungkin penyebabnya

Beberapa Catatan Akhir

Pertimbangkan penggunaan tag ALT yang tepat dan kecepatan serta kinerja situs web Anda secara keseluruhan

Tag ALT, atau "teks alternatif", adalah apa yang ditampilkan oleh browser jika gambar gagal dimuat. Mereka juga merupakan komponen penting dalam membuat situs web yang dapat diakses yang dapat digunakan oleh penyandang disabilitas tertentu. Setiap gambar sebaris di situs Anda harus memiliki tag ALT yang sesuai. Gambar yang diterapkan dengan CSS tidak menawarkan atribut ini

Kutip Artikel ini

Format

Kutipan Anda

Girard, Jeremy. "7 Alasan Mengapa Gambar Tidak Dimuat di Situs Web Anda. "PikirCo. https. // www. thinkco. com/images-not-loading-4072206 (diakses 28 Januari 2023)

Mengapa PNG tidak ditampilkan dalam HTML?

Bagaimana cara menampilkan gambar PNG dalam HTML?

Ringkasan Bab .

Use the HTML element to define an image..

Gunakan atribut src HTML untuk menentukan URL gambar

Gunakan atribut alt HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan

Apakah gambar PNG berfungsi dalam HTML?