Mengapa satu gambar gagal saat sisa halaman tetap termuat
Tiga kondisi memisahkan gangguan jaringan dari permintaan yang diblokir dan dari kesalahan render. Temukan URL yang dipilih peramban sebelum mengubah jalur.
Halamannya termuat, teksnya tampil, dan satu gambar tetap menjadi ikon rusak. Reaksi pertama adalah menyalahkan terowongan, karena terowongan adalah hal yang berubah. Sebelum itu, cari tahu URL mana yang sebenarnya diminta peramban untuk gambar tersebut, karena URL halaman dan URL gambar adalah dua bukti yang berbeda. Sebagian besar laporan gambar hilang bermuara pada host yang tidak pernah menerima permintaan yang berfungsi, dan jawaban itu hanya butuh satu lihat ke panel Jaringan.
Tiga kondisi menentukan ke mana harus melihat
Kondisi pertama adalah apakah gambar berasal dari host yang sama dengan halaman. Host gambar terpisah memerlukan resolusi nama, koneksi, dan identitas TLS-nya sendiri, jadi halaman yang termuat tidak mengatakan apa pun tentangnya.
Kondisi kedua adalah apakah peramban memblokir permintaan sebelum mengirimkannya. Konten campuran, kebijakan keamanan konten, dan aturan perujuk dapat menghentikan gambar tanpa menghasilkan respons server biasa, itulah sebabnya tidak ada permintaan gagal dalam daftar.
Kondisi ketiga adalah apakah pengiriman berhasil dan render gagal, kasus ketika byte tiba dan gambar tetap tidak muncul. Ketiga kondisi itu punya tiga pemilik berbeda, dan hanya yang pertama merupakan persoalan jaringan.
| What you see | Where the fault sits |
|---|---|
| Request absent from the list | Markup, lazy loading or a policy that blocked it |
| Request failed or timed out | Resolution, route, TLS or the image host itself |
| Request returned 200, image blank | Response type, decoding or rendering |
Temukan sumber daya yang sebenarnya dipilih peramban
URL yang Anda lihat di kode sumber halaman sering kali bukan URL yang diminta. Kumpulan sumber, elemen picture, dan latar CSS semuanya memungkinkan peramban memilih sumber daya lain berdasarkan lebar viewport, kerapatan piksel, atau dukungan format. Gambar yang dimuat secara malas mungkin tidak diminta sama sekali sampai halaman mencapai keadaan tertentu.
Periksa elemen dan permintaan bersama-sama, dan simpan pemrakarsa bersama permintaan saat melaporkan masalah. Referensi elemen gambar dari MDN mencakup pemilihan sumber, perilaku pemuatan, dan kendali perujuk di satu tempat, yang cukup untuk menunjukkan atribut mana yang memilih URL yang gagal.
Catat nama host, status, rantai pengalihan apa pun, dan tipe konten respons. Respons 200 yang mengembalikan halaman masuk bukan gambar yang dapat dipakai, dan pengalihan ke halaman kesalahan HTML terlihat sama seperti berkas rusak sampai Anda membaca tipenya.
Baca status sebelum jaringan
Batas waktu, permintaan yang ditolak, dan kesalahan penguraian kode memerlukan langkah berikut yang berbeda, dan kode status adalah yang memisahkannya. Batas waktu menunjuk ke resolusi nama, rute, atau host yang tidak menjawab. Permintaan yang ditolak menunjuk ke kebijakan atau lapisan otorisasi. Kesalahan penguraian kode menunjuk ke byte atau format.
Jika permintaan sama sekali tidak muncul, berhentilah melihat jaringan dan lihat markup. Penyebab paling umum adalah entri kumpulan sumber yang lebih disukai peramban dan tidak lagi ada di server, diikuti elemen yang tidak pernah dibuat terlihat oleh skrip.
Pembeda itu saja mencegah sebagian besar usaha yang sia-sia dalam laporan jenis ini.
Saat peramban memblokirnya, tidak ada respons untuk dibaca
Konten campuran adalah kasus klasik: halaman HTTPS yang meminta gambar melalui HTTP biasa mendapat permintaan diblokir alih-alih gagal, dan konsol mencatat alasannya. Kebijakan keamanan konten menghasilkan bentuk yang sama, dengan direktif yang diblokir disebutkan dalam pesan. Kebijakan perujuk yang menghapus tajuk juga dapat membuat host yang dilindungi dari hotlink mengembalikan pengganti alih-alih gambar.
Baca alasan yang tercatat sebelum menyentuh jalur jaringan, karena blokir ini tidak membaik saat rute berubah. Menambahkan izin lintas asal juga bukan solusinya: menampilkan gambar dari host lain dan membaca pikselnya di kanvas adalah operasi berbeda, dan hanya yang kedua memerlukan tajuk yang ditempel orang.
Untuk situs yang Anda kelola, perbaiki URL sumber daya, respons, atau kebijakan di pemiliknya dan pertahankan persyaratan otorisasi serta perujuk. Untuk situs yang tidak Anda kendalikan, kirim halaman dan bukti permintaan ke saluran dukungnya alih-alih menerbitkan ulang tautan sumber daya pribadi atau yang kedaluwarsa.
Bandingkan jalur tanpa mengubah bukti
Jika Anda memang ingin menguji jalur akses, tahan semua hal lain tetap: halaman yang sama, akun yang sama, gambar terpilih yang sama, satu jalur yang diizinkan diubah. Bandingkan entri permintaan berdampingan alih-alih hasil render, karena hasil render memberi tahu apakah gambar muncul, bukan mengapa.
Gambar yang termuat di rute baru tidak membuktikan rute itu diotorisasi, dan gambar yang tetap rusak tidak membuktikan terowongan yang bersalah. Jika gambar dihapus atau akses sengaja dibatasi, gunakan alternatif yang didukung alih-alih mematikan pemeriksaan sertifikat atau menyalin materi terlindungi milik orang lain.
Urutan kerja: kenali URL terpilih, baca status dan tipenya, periksa apakah ada alasan blokir yang tercatat, lalu bandingkan satu perubahan jalur setiap kali.