Gantikan Missing Image Dengan Gambar Lain

Bila gambar tak keluar, teks alt akan muncul pada gambar. Sebab tu penting untuk kita letak teks alt yang elok, bukan sekadar cukup syarat, supaya membantu pengguna faham apa yang sepatutnya ada disitu. Sebab tu dalam Penilian di dalam Sistem Pemantauan Laman Web dan Servis Kerajaan (SPLaSK), alt salah satu elemen yang perlu dipatuhi bagi setiap Laman Web dan Portal Agensi Kerajaan.

Selain dari memaparkan text alt , kita boleh gantikan dengan paparan gambar lain, ataupun dengan default image. Cuma kalau tengok contoh bawah ni, paparan dia tak menarik sangat kan, hanya papar text alt :

Jadi, jom kita tambah sikit fungsi html onerror="this.onerror=null;this.src='image-placeholder.png';" di dalam <img> dan hasilnya seperti di bawah :

Ok, nampak lagi kemas.

onerror ni akan diaktifkan bila berlaku error pada elemen tu, dan kita boleh arahkan browser buat sesuatu sebagai tindak balas. Contoh paling biasa, bila gambar gagal load, kita paparkan gambar gantian (fallback) seperti contoh di atas.

Kita juga boleh guna onerror pada elemen lain macam <script> atau <iframe> kalau nak kesan bila sesuatu fail tak berjaya dimuatkan. Tapi penggunaan paling popular memang untuk gambar.

Satu tip penting, pastikan fallback image yang kita guna betul-betul wujud, supaya tak jadi error berganda.

Selamat mencuba.

Kod Penuh