निर्दिष्ट छवि फ़ाइल नहीं मिली है तो डिफ़ॉल्ट छवि को प्रदर्शित करने का सबसे अच्छा तरीका?

Question

मुझे आपका औसत ई-कॉमर्स ऐप मिला है, मैं डेटाबेस में ITEM_IMAGE_NAME स्टोर करता हूं, और कभी-कभी प्रबंधकों को छवि का नाम मिस्सेल करता है।

"गायब छवियों" (आईई में लाल एक्स) से बचने के लिए, हर बार जब मैं उत्पादों की सूची प्रदर्शित करता हूं, तो मैं उत्पाद से संबंधित छवि के लिए सर्वर की जांच करता हूं, और यदि वह फ़ाइल मौजूद नहीं है - तो मैं इसे बदलता हूं डिफ़ॉल्ट छवि के साथ।

जहां तक ​​मैं यह कह सकता हूं प्रदर्शन को प्रभावित नहीं करता है, लेकिन अगर मैं "गायब छवि" समस्या को ठीक करने के लिए कोई विकल्प हैं तो सोच रहा था।

मैं ASP.NET + सी # (.NET 3.5) का उपयोग कर रहा

कुछ कोड: या कार्यक्रम:

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

Answer 1

आप जावास्क्रिप्ट

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

संपादित के साथ कुछ सोच सकते हैं एक 404.aspx एक डिफ़ॉल्ट छवि लौट रहा है, अगर कोई nonexisting छवि का अनुरोध किया गया था।

Answer 2

आप सर्वर पर निर्दिष्ट कर सकते हैं कि सभी छवियों के लिए सभी छवियों के लिए छवि को वापस क्यों किया जाना चाहिए। इस तरह उपयोगकर्ता को लाल एक्स के बजाय "2 अवेसम 2 एसएचओ" लोलकैट मिल सकता है।

Answer 3

मुझे लगता है कि आपका रास्ता काफी ठीक है। मैं इसे एक समारोह में करूँगा या करूँगा। श्रेणी इमेज एक्सेसर।

Answer 4

मुझे लगता है कि उपयोगकर्ताओं को असंगत डेटा दर्ज करने की अनुमति देने के बजाय डेटा को सुसंगत बनाने का एक तरीका मिलेगा। शायद आपका प्रबंधन ऐप प्रबंधक को मौजूदा छवि का चयन करने या एक नया अपलोड करने की अनुमति दे सकता है, फिर इस इनपुट के आधार पर छवि का नाम सेट करें ताकि आपको आश्वासन दिया जा सके कि छवि मौजूद होगी। केवल एक छवि हटा दें जब इसके सभी संदर्भ डेटाबेस से हटा दिए गए हैं। अपने ऐप में डेटा के साथ बातचीत को प्रतिबंधित करें ताकि लोग उन गलतियों को नहीं कर सकें।

इसे संभालने का एक और तरीका एक हैंडलर (या एएसपी.नेट एमवीसी में एक नियंत्रक) होगा जो आईडी पर आधारित छवि लुकअप करता है और छवि डेटा देता है। कैशिंग के साथ मिलकर यह बहुत ही कुशल हो सकता है और आपको छवि प्रतिस्थापन भी करने की अनुमति देगा।

Answer 5

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

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

missing.png हैं भार है, यह के रूप में अगर वापस आने निर्दिष्ट नहीं किया गया, अंतरिक्ष इसके लिए आवंटित कवर किया जाएगा। (मान लीजिए कि यह पारदर्शी नहीं है।)

यदि missing.png लोड करने में विफल रहता है, तो स्थान fallback.png से भरा जाएगा। आपको अभी भी एक छोटी "टूटी हुई छवि" आइकन मिल जाएगी, लेकिन मैं इसे इस तरह से पसंद करता हूं ... एक छोटा संकेत जो "मुझे ठीक करें" कहता है।

यदि आपकी छवियां एक ही आकार के नहीं हैं, तो आप देखेंगे कि डिफ़ॉल्ट रूप से पृष्ठभूमि टाइल्स। यदि आप इसे पसंद नहीं करते हैं तो आप background-repeat: no-repeat; का उपयोग कर सकते हैं।

Answer 6

मुझे एरिक के समाधान पसंद हैं, लेकिन पहले निष्पादन के बाद घटना को हटाए बिना, क्योंकि यदि आप उस कोड का उपयोग कर रहे हैं, तो मान लें कि, एक एमवीसी आंशिक दृश्य, यह केवल पहली बार लोड होने पर ही काम करेगा।

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

मामले में आप एक ही स्थिति में कई छवियों है, एक ग्रिड की तरह, तो आप इस बजाय कर सकते हैं:: तो मैं के साथ जाना चाहते हैं

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

बेशक , आप कर सकते हैं एक और अधिक विशिष्ट jQuery चयनकर्ता का उपयोग करें।