Belirtilen görüntü dosyası bulunamazsa varsayılan görüntüyü göstermenin en iyi yolu?

Question

Ortalama e-Ticaret uygulamasına sahibim, ITEM_IMAGE_NAME dosyasını veritabanında depolarım ve bazen yöneticiler görüntü adını MISSPELL.

"Eksik resimlerden" kaçınmak için (IE'de kırmızı X), ürün listesini her görüntülediğimde, sunucuyla ilgili görüntüyü kontrol ediyorum ve bu dosya mevcut değilse - değiştiriyorum varsayılan görüntü ile.

Bu, performansı etkilemediğini söyleyebildiğim kadarıyla, "eksik görüntü" sorununu gidermek için alternatifler varsa numarasını merak ediyordum.

Ben ASP.NET + C# (.NET 3.5) kullanıyorum

Bazı kod: Ya programın:

foreach (Item item in Items) 
{ 
    string path = Path.Combine("~/images/", item.categoryImage); 
    item.categoryImage = File.Exists(Server.MapPath(path)) ? item.categoryImage : GetImageDependingOnItemType(); 
} 

Answer 1

Sen javascript

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'"> 

Düzenleme ile bir şeyler düşünebilirsiniz Var olmayan bir resim istendiyse, varsayılan bir resmi döndüren 404.aspx.

Answer 2

Varolan tüm resim istekleri için hangi görüntülerin döndürülmesi gerektiğini sunucuda belirtebilirsiniz. Böylece kullanıcı kırmızı x yerine "2 AWESUM 2 SHO" lolcat alabilir.

Answer 3

Sanırım yolun gayet iyi. Bunu bir işlevde yapardım veya .categoryImage erişimcisini yaparım.

Answer 4

Kullanıcıların tutarsız veri girmesine izin vermek yerine verileri tutarlı hale getirmenin bir yolunu bulacağımı düşünüyorum. Belki de yönetim uygulamanız yöneticinin mevcut bir görüntüyü seçmesine veya yeni bir resim yüklemesine izin verebilir, ardından görüntünün ismini bu girdiye göre ayarlayarak görüntünün var olacağından emin olabilirsiniz. Sadece tüm referanslar veritabanından kaldırıldığında bir resmi kaldırın. Verilerle olan etkileşimi uygulamanızla sınırlayın, böylece insanlar bu tür hataları yapamaz.

Bunun üstesinden gelmenin başka bir yolu, kimliğe göre görüntü araması yapan ve görüntü verilerini döndüren bir işleyiciye (veya ASP.NET MVC'de bir denetleyiciye) sahip olmaktır. Önbelleğe alma ile birlikte bu çok verimli olabilir ve aynı zamanda görüntü değiştirme yapmanıza da olanak tanır.

Answer 5

<style> 
    .fallback { background-image: url("fallback.png"); } 
</style> 

<img class="fallback" src="missing.png" width="400" height="300"> 

yükler missing.png ise son çare belirtilmemişse sanki, o bunun için ayrılan alanı kapsayacak. (Saydam olmadığı varsayılırsa.)

missing.png yüklenemediğinde, alan yerine fallback.png doldurulacaktır. Hala biraz "kırık görüntü" simgesi alacaksın, ama ben bu yolu tercih ederim ... "düzelt beni" diyen küçük bir ipucu.

Resimleriniz aynı boyutta değilse, arka plan döşemelerinin varsayılan olarak olduğunu görürsünüz. Beğenmediyseniz background-repeat: no-repeat;'u kullanabilirsiniz.

Answer 6

Erik'in çözümünü beğenirim, ancak ilk çalıştırmanın ardından olayı kaldırmadan, çünkü bu kodu bir MVC kısmi görünümünde kullanıyorsanız, bu yalnızca yüklendiği ilk seferde çalışır.

durumda

<img src="image.jpg" onerror="this.src='default.jpg';" /> 

Eğer aynı durumda sayıda resim var, bir tablo gibi, bunun yerine bunu yapabilirsiniz:: Ben gelirdim

Tabii

$("img").on("error", function() { 
    $(this).attr('src', 'default.jpg'); 
}); 

, sen isteyebilirsiniz daha spesifik bir jQuery seçici kullanın.