Mengapa gambar saya tidak berfungsi di html?

Lihat sekarang beberapa alasan yang dapat menjelaskan mengapa gambar Anda tidak dimuat di situs Anda dan cara memperbaikinya. sebuah gambar bernilai seribu kata

Desain • Panduan / Tutorial • Pengembangan Web

Diperbarui pada 2 Januari 2023

Lihat sekarang beberapa alasan yang dapat menjelaskan mengapa gambar Anda tidak dimuat di situs Anda dan cara memperbaikinya

Pepatah lama mengatakan bahwa “sebuah gambar bernilai ribuan kata. ” Hal ini terutama berlaku di Web, di mana rentang perhatian sangat pendek. Jadi gambar yang tepat dapat membuat atau menghancurkan situs dengan menarik perhatian yang sesuai dan melibatkan pengunjung halaman cukup lama bagi mereka untuk mempelajari apa yang perlu mereka ketahui atau melakukan tindakan tertentu yang menandakan "kemenangan" untuk situs tersebut. Ya, ketika datang ke situs web, gambar sebenarnya bernilai lebih dari seribu kata

Jadi dengan pentingnya pembuatan gambar online, selanjutnya mari pertimbangkan apa yang dikatakan situs web Anda jika ide yang seharusnya ada di situs gagal dimuat. Hal ini dapat terjadi apakah Anda memiliki gambar sebaris yang merupakan bagian dari HTML atau gambar latar yang diterapkan dengan CSS (dan situs Anda mungkin memiliki keduanya). Intinya adalah ketika grafik gagal dimuat di halaman, hal itu membuat desain terlihat rusak dan, dalam beberapa kasus, dapat merusak pengalaman pengguna di situs tersebut. "Seribu kata" yang dikirim oleh gambar itu tentu saja bukan kata-kata positif

Mengapa Gambar Tidak Dimuat?

Mari kita lihat beberapa alasan umum mengapa gambar tidak dimuat, serta apa yang harus Anda perhatikan saat memecahkan masalah ini selama pengujian situs

Jalur File Salah

Saat menambahkan gambar ke file HTML atau CSS situs, Anda harus membuat jalur ke lokasi dalam 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 'images. ’ 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

Langkah 1 dalam men-debug masalah pemuatan gambar adalah memastikan bahwa jalur file yang telah Anda kodekan sudah benar. Mungkin Anda menentukan direktori yang salah atau tidak mencantumkan jalur ke direktori tersebut dengan benar. Jika bukan ini masalahnya, Anda mungkin memiliki masalah lain dengan jalur itu. Baca terus

Nama File Salah Eja. Mengapa Gambar Tidak Dimuat?

Saat Anda memeriksa jalur file untuk file Anda, pastikan juga bahwa Anda mengeja nama gambar dengan benar. Menurut pengalaman kami, nama yang salah atau salah eja adalah penyebab paling umum dari masalah pemuatan gambar. Ingat, browser web sangat keras dalam hal pengarsipan nama. Jika Anda tidak sengaja melupakan surat atau menggunakan catatan yang salah, browser tidak akan mencari file yang serupa dan berkata, "oh, mungkin maksud Anda yang ini, bukan?"

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. Pastikan Anda menggunakan jenis file yang benar untuk setiap gambar, lalu pastikan Anda telah meminta ekstensi yang sama di kode situs web Anda. Selain JPG, meskipun Anda memiliki file WebP, Anda dapat mengubahnya menjadi format gambar biasa PNG dengan mengambil konverter online dari konverter online. com yang 100% gratis.  

Juga, cari sensitivitas huruf besar-kecil. Jika file Anda diakhiri dengan. JPG, dengan huruf kapital semua, tetapi referensi kode Anda. jpg, semua huruf kecil, ada server web tertentu yang akan melihat keduanya berbeda, meskipun keduanya adalah kumpulan huruf yang sama. Sensitivitas kasus penting. Inilah mengapa kami secara permanen menyimpan file kami dengan semua huruf kecil. Melakukan hal itu memungkinkan kita untuk selalu menggunakan huruf kecil dalam kode kita. Menghilangkan satu kemungkinan masalah yang mungkin kita miliki dengan file gambar kita

File Hilang. Mengapa Gambar Tidak Dimuat

Jika jalur ke file gambar Anda benar, dan nama serta ekstensi file juga bebas dari kesalahan. Hal selanjutnya yang harus diperiksa adalah memastikan bahwa file telah diunggah ke server web. Mengabaikan mengunggah file ke server itu ketika ada situs. Jadi, adalah kesalahan umum yang mudah diabaikan

Bagaimana Anda memperbaiki masalah ini?

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. Ini mungkin terlihat aneh, tetapi kami telah melihat ini berfungsi lebih dari sekali. Terkadang file rusak, jadi metode "hapus dan ganti" ini bisa membantu

Situs Web yang Menghosting Gambar Sedang Turun

Anda biasanya ingin menghosting gambar apa pun yang digunakan situs Anda di server Anda sendiri. Namun 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

Masalah Transfer. Mengapa Gambar Tidak Dimuat

Apakah file gambar dimuat dari domain eksternal atau dari domain Anda sendiri. Selalu ada kemungkinan bahwa ada masalah transfer untuk file tersebut saat pertama kali diminta oleh browser. Ini seharusnya tidak menjadi kejadian umum. Jika ya, Anda mungkin perlu mencari penyedia hosting baru, tetapi hal itu dapat terjadi dari waktu ke waktu

Sisi yang disayangkan dari masalah ini adalah tidak ada yang dapat Anda lakukan untuk mengatasinya. Karena itu adalah masalah di luar kendali Anda. Kabar baiknya adalah ini adalah masalah sementara yang sering diselesaikan dengan cepat. Misalnya, ketika seseorang melihat halaman yang tampak rusak dan menyegarkannya, hal itu saja sudah sering memperbaiki masalah dan memuat gambar  dengan benar. Jika  Anda melihat gambar rusak, segarkan browser untuk melihat apakah mungkin itu hanya masalah transmisi pada permintaan awal Anda.

Beberapa Catatan Akhir

Saat memikirkan tentang gambar yang tidak memuat masalah. Jadi, dua hal yang juga harus diperhatikan adalah penggunaan tag ALT yang tepat. Kecepatan situs web Anda dan kinerja keseluruhan

Tag ALT, atau “teks alternatif”, 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. Perhatikan bahwa gambar yang diterapkan dengan CSS tidak memiliki atribut ini

Adapun kinerja situs web, memuat terlalu banyak gambar. Jadi, bahkan beberapa gambar raksasa saja belum cukup siap. Pengiriman web akan merusak kecepatan pemuatan. Untuk alasan ini, pastikan untuk menguji dampak dari setiap gambar. Anda menggunakannya dalam desain situs Anda dan mengambil langkah apa pun yang diperlukan untuk meningkatkan kinerja situs tersebut. Sambil tetap menciptakan tampilan dan nuansa keseluruhan yang sesuai untuk proyek situs web Anda