Merhaba. Görselliğin her geçen gün başka bir boyuta taşındığı web dünyasında görseller büyük bir öneme sahip konumda. Hal böyle olunca sunucu kaynaklı yada başka nedenlerden dolayı fotograf yüklemelerinde bir takım sorunlar oluşabiliyor. (Eskisi kadar olmasa da)
Bir web sayfası bir fotografı yüklemeye çalışıp bazı nedenlerden dolayı yükleyemediyse bildiğiniz gibi sayfa kırık bir resim görünür. Tarayıcı bize burada bir zamanlar bir fotograf vardı ama artık ben bunu yükleyemiyorum der. Haliyle ortaya developerların hiç istemediği bir durum çıkar. Peki bu sorunun önüne geçilebilir mi? Böyle bir durum yaşandıysa kırık resim yerine başka bir resim gösterebilir miyiz? Bu soruların cevabını aşağıda bulabilirsiniz.
Sorunu çözmenin birkaç yolu var fakat ben en kısa ve en basit olanından bahsedeceğim. Öncelikle sayfa içerisinde birçok yerde kullanacağımızı ve birçok resim bulunduğunu düşünerek bir fonksiyon yazalım.
function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
Şimdi yazdığımız fonksiyonu resmin onerror olayında tetikleyelim. (Yani hata oluştuğunda bu fonksiyonu çalıştır gibi)
<img src="image.png" onerror="imgError(this);"/>
Fonksiyonumuz hata durumunda devreye girecek. Kırık, yani yüklenemeyen resmi değiştirip, noimage.gif adında bir görsel ekleyecek. (Yüklenemeyen resim ile değiştirecek.) 2. yol olarak bana fonksiyon lazım değil tek resimde çalışsın derseniz aşağıdaki gibi de kullanabilirsiniz.
<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />
Ayrıca: Aşağıdaki uyumluluk tablosu hata özelliklerini destekleyen tarayıcıları listeler. İnceleyebilirsiniz.