İçeriğe geç

JavaScript ile Kırık Resim Linklerini Düzeltme

Bir web sayfasında, ilk istenmeyen şey; kırık linklerdir. Sayfa bağlantıları veya resimlerin linklerinin sağlam olması kullanıcı deneyimi açısından önemlidir.

Bu yazıda çok pratik bir şekilde, kırık linke sahip olan daha doğrusu var olmayan resimleri düzeltme işlemini göstermek istiyorum.

Eğer sayfanızda birden fazla resim varsa; bu resim dosyalarının linklerinin kırılma olayına karşı çok basit bir önlem alabilirsiniz.

<img> etiketi ile resim eklerken, onerror seçeneğini de ekleyin.

<img src="tavsan-resmi.jpeg" alt="Angora tavşanı" onerror="imageBrokenLinkError(this)">

onerror seçeneğinde belirttiğimiz fonksiyonumuz da aşağıdaki gibi olacaktır.

function imageBrokenLinkError(image) {
    image.onerror = '';
    image.src = 'standart-tavsan-resmi.jpeg';
}

Yukarıdaki kodlarımızda; resim dosyasının linkinde herhangi bir hata olması durumunda, elimizde olan diğer bir resmin linkini verdik. Burada soru şu: hata olması durumunda verdiğimiz resim dosyasının linki de kırılırsa veya kırıksa?

Linki kırılan resim dosyasına başka bir resim eklemek yerine bu resim dosyasını gizleye de bilirsiniz.

function imageBrokenLinkError(image) {
    image.hidden = true;
}

Bu işlemleri jQuery ile de gerçekleştirebilirsiniz.

// Standart resim ekleme
$('img').on("error", function() {
    $(this).attr('src', 'standart-tavsan-resmi.jpeg');
});

// veya

// Resim dosyasını gizleme
$("img").on("error", function() {
    $(this).hide();
});

JavaScript dosyanızda bir yerde bu veya buna benzer bir kod saklarsınız (standart bir de resim), ilerleyen zamanlar da kırık resim dosyaları konusunda sıkıntı yaşamazsınız.

Saygı ve muhabbetle!..

Bu içeriği paylaşmak ister misiniz?

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Buradaki içeriklerin tümü kamu malıdır. Kullanılması ve paylaşılması özgürdür.