Javascript ile Bulunamayan Görsellere Varsayılan Görsel Atama

Merhabalar , bu yazımda sizlere Javascript ile yüklenemeyen veya bulunamayan görseleri nasıl tespit edersiniz ve bu testip ettiğiniz görsellere nasıl varsayılan bir link verirsiniz onu anlatacağım .

Öncelik ile bildiğiniz üzere tarayıcımızda bir görsel yüklenmediğinde  Console ekranımızda kırmızı bir uyarı görürüz ve aynı zamanda da dokümanımızda da görseli çağırdığımız yerde kötü bir görünüm oluşur.

İşte bu gibi durumları nasıl tespit ederiz gelin bakalım :

Javascript Error Eventi Nedir ?

Javascript'te bildiğiniz üzere bir çok event var . Bunlar : click , keydown , mouseout gibi eventler.

Javascript'te bir de hataları yakalamak için bir eventimiz var o da Error eventi . Bu event sayesinde img elemanımız gibi bir eleman ile hata oluştuğunda bu event devreye girer . Biz de bu eventi dinleyeceğiz .

Javascrit Error Eventi ile Yüklenmeyen görselleri tespit etme .

İki farklı yöntem ile kullanılabilir . 
 

1. Birincisi html tagları arasına inline olarak onerror metodunu kullanarak :

   <img src="resim.jpg" onerror="this.onerror=null;this.src='varsayilan.png';"/>

2. İkincisi fonksiyonlar yazarak 

    function resimHata(resim){
           resim.src = "/varsayilanresim.jpg";
           resim.onerror = "";
           return true;
   }
   
   var img = document.querySelectorAll("img");
   document.querySelectorAll('img').forEach(img => {
   // Her resim etiketinin error eventine yukarıdaki fonksiyonu ekliyoruz .
    img.addEventListener('error', resimHata(this));
   });