Yüklenemeyen resimleri düzgün göstermenin yolları

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
Bir web sayfasındaki yüklenmeyen resimleri çoğu zaman doğru yönetilmediği için bozuk resim olarak görüyoruz hatta bazen de tasarımın kaymasını, arayüzde bozukluklar olabiliyor.

Örnek bir senaryo: bir makele yazdınız ve internette başka bir sitedeki resimi kullandınız, 1 ay sonra resim o siteden kaldırıldığı zaman, veya site kapandığı zaman sizin sitenizdeki yazıda resimler bozuk görünecektir. Tabi ki bunun tek cözümü resimleri bulmaya çalışmak, ya da o şekilde bırakmak isteyebilirsiniz. Fakat siz bu değişiklikleri yapana kadar, sitenizde bozuk resim (yuklenemeyen) olarak görünecek.

Bir resim yükleyemediğinizde yapabileceğiniz birkaç şey var, birincisi yüklenmemiş resimleri ortadan kaldırabilirsiniz, ama resimler içerikle çok ilişkili ise, mesela yazınızda ekran görüntüsünden bahsediyorsanız ve oratada bir ekran görüntusü yoksa resmin bozuk görünmesinden daha büyük bir yanlış anlaşılma ile karşılaşabilirsiniz. Resmi kaldırabilir veya jenerik bir "yuklenemis resim" imaji gösterebilirsiniz.

Eğer kaldırmak istiyorsanız img etiketi içindeki onerror özelliğinde resminizi kaldırabilirsiniz.

Not: Sayfanızda jQuery kullanıldığını varsayıyorum.
<img src="..." onerror="$(this).remove();" alt="" />
Böylece resminiz yüklenmede başarısız olursa ortadan kaldırılacaktır.

Eğer jenerik bir resime çevirmek istiyorsanız:
<img src="..." onerror="$(this).attr('src', 'basarisiz.png');" alt="" />
Bu örnekler sadece tek imaj için yazılmış örnekler,

Eğer tüm sayfanıza etki edecek daha jenerik bir uygulama yapmak için;
$(function(){
	$('img').bind('error', function(){
		//$(this).remove();
		// or
		$(this).attr('src', 'basarisiz.png');
	});
});
Ancak böyle bir uygulamada sitenizdeki tüm imajlar etkileneceği için tasarımınızı şekillendiren imajların bundan etkilenmesini istemeyebilirsiniz. Bunu yapmak için de jquery seçicisini kısıtlandırabilirsiniz: "img.hatadaKaldir" veya ".yazi img"

Yorumlar

3 Mart Cumartesi ´12 10:39
vay iyimiş işte sevdiğim paylaşımlar   :-)
4 Mart Pazar ´12 00:49
Güzel fikir.
Üye Resmi Şafak SARAÇOĞLU
29 Mart Perşembe ´12 07:31
Çok teşekkür ederim süper bir paylaşım olmuş
JS gücü işte PHP ile uğraşıp duruyordum   :-)
Üye Resmi Batuhan Göksu
29 Ekim Pazartesi ´12 06:11
bu işlemi php den alarak js ile yapmam güzel oldu teşekkür ederim mfyz lakin şimdi fark ettimki internet explorer da çalışmıyor   :-(  onun için ne yapmamız gerekiyor.
Üye Resmi Nelit
30 Nisan Perşembe ´15 11:52
Yazı için teşekkürler. Bir konuda yardımınıza ihtiyacım var.
<img src="image.png" /> şeklinde resmim var. Bu resim onerror verdiğinde sırayla başka resimler göstertmek istiyorum. Şu şekilde:
ilk resim hatalı > bu resmi göster <img src="image2.png" />
üstteki resim de hatalı > bu resmi göster <img src="image3.png" />
üstteki resim de hatalı > bu resmi göster <img src="image4.png" />


Yardımcı olursanız çok sevinirim.
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor