जब src स्रोत छवि नहीं मिली है तो चुपचाप "छवि नहीं मिली" आइकन को कैसे छिपाएं

Question

क्या आप जानते हैं कि क्लासिक "इमेज नहीं मिली" को कैसे छिपाया जाए एक छवि फ़ाइल नहीं मिलने पर प्रदान किए गए HTML पृष्ठ से आइकन को ?

जावास्क्रिप्ट / jQuery / CSS का उपयोग करके कोई भी कार्य विधि?

Comments

एंडी का जवाब सही है, हालांकि, आप इसके बजाय style.vsibility का उपयोग करना चाह सकते हैं। यदि आप दृश्यता सेट करते हैं, तो तत्व अभी भी आपके दस्तावेज़ पर अपना स्थान बनाए रखता है, इस प्रकार कोई मज़ेदार दस्तावेज़ नहीं चलता है।

— क्रिश्चियन

मैं बात नहीं देख रहा हूँ। आप अपने html कोड से किसी भी मौजूदा पुन: स्रोत तक पहुंचने का प्रयास करने वाले नहीं हैं। खराब व्यवहार वाले छुपाने के लिए जावास्क्रिप्ट का उपयोग करना मुझे एक बदसूरत समाधान लगता है।

— बोरिस डेलोर्मस

@Kaaviar आपको वह बिंदु याद नहीं आ रहा है। ढेर सारी हॉटमेड इमेज यहां ढेर ओवरफ्लो पर टूटी हुई हैं, इस तथ्य के कारण कि पोस्ट के समय चित्र उपलब्ध हो सकते हैं, लेकिन कुछ महीने बाद अनुपलब्ध हैं। इन छवियों को चुपचाप और धीरे से चंगा किया जाता है।

— systempuntoout

@systempuntoout: मुझे यकीन नहीं है कि दोनों के साथ अलग व्यवहार क्यों किया जाता है। मैंने फ़ायरफ़ॉक्स और क्रोम में एक टूटी हुई छवि का परीक्षण किया , यह फ़ायरफ़ॉक्स में नहीं दिखा, लेकिन यह क्रोम में टूटी हुई दिखाता है। यह स्पष्ट है कि यह कुछ ऐसा है जो फ़ायरफ़ॉक्स अपने आप तय कर रहा है, क्योंकि ऐसा नहीं लगता कि कोई भी शैली इसे प्रभावित कर रही है। btw, StackPrinter पर महान काम।

— एंडी ई

@systempuntoout: मुझे पता चला कि फ़ायरफ़ॉक्स इसके साथ कैसे काम करता है। एक अद्यतन फ़िडेल और [मालिकाना छद्म वर्ग, :-moz-broken] ( developer.mozilla.org/en/CSS/:-moz-broken ) देखें। मैं पहले खुद से सोच रहा था कि एक छद्म वर्ग टूटी हुई छवियों को स्टाइल करने के लिए उपयोगी होगा।

— एंडी ई

Answer 1

onerrorछवि को लोड करने में विफल होने पर आप जावास्क्रिप्ट में घटना का उपयोग कर सकते हैं :

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

JQuery में (जब से आपने पूछा):

$("#myImg").error(function () { 
    $(this).hide(); 
});

या सभी छवियों के लिए:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

आपको visibility: hiddenइसके बजाय उपयोग करना चाहिए .hide()यदि चित्र छिपाना लेआउट को बदल सकता है। वेब पर कई साइटें इसके बजाय एक डिफ़ॉल्ट "नो इमेज" छवि का उपयोग करती हैं, srcजब निर्दिष्ट छवि स्थान अनुपलब्ध है, तो उस छवि की विशेषता को इंगित करता है।

Comments

एंडी - सभी छवियों पर लागू करने के लिए 'वैश्विक' समाधान क्या होगा ?? मैं सोच रहा था कि यह काफी आसान होगा अगर वे सभी एक ही डिव में थे - बस दस्तावेज़ में सभी छवियों के बारे में सोच रहे थे ...

— jim tollan

@jAndy: मुझे पूरा यकीन था कि यह है, लेकिन आपकी टिप्पणी ने मुझे डबल-चेक कर दिया। एक त्वरित Google ने इस w3schools पृष्ठ को वापस कर दिया (क्षमा करें डेविड, यदि आप इसे पढ़ रहे हैं) क्रॉस ब्राउज़र समर्थन का संकेत देता है।

— एंडी ई

@ जिम: यदि आप jQuery का उपयोग कर रहे हैं, तो आप ईवेंट को सभी छवियों पर लागू कर सकते हैं। बस टैग चयनकर्ता का उपयोग करें, जैसे $("img").error(function () { /*...*/ });।

— एंडी ई

@Andy E: अच्छा लगता है, +1। अगला दिलचस्प सवाल यह होगा, " error" live()या के साथ बाउंडेबल है delegate()।

— जॉन्डी

visibilityबेहतर होगा, क्योंकि displayलेआउट को तोड़ सकते हैं।

— बजे gblazex

Answer 2

<img onerror='this.style.display = "none"'>

Comments

दुर्भाग्य से मैं इस समाधान का उपयोग नहीं कर सकता क्योंकि html सामग्री को Json के माध्यम से एक तृतीय पक्ष वेबसाइट से डाउनलोड किया गया है और मैं इसे संपादित नहीं कर सकता। फिर भी धन्यवाद।

— systempuntoout

बहुत बढ़िया, बस मुझे जो चाहिए था। सरल और अबाधित, यह एक टेम्पलेट में फिट बैठता है!

— मैक्स

हालांकि पहले से ही काफी पुराना है, यह बहुत अच्छा है! क्या मेरी अब छिपी छवि के आसपास <a> टैग को छिपाने का एक तरीका है?

— एसजेडीएस

Answer 3

मैंने गैरी विलोबी द्वारा सुझाए गए समाधान को थोड़ा संशोधित किया है, क्योंकि यह टूटी हुई छवि आइकन को संक्षेप में दिखाता है। मेरा समाधान:

    <img src="..." style="display: none" onload="this.style.display=''">

मेरे समाधान में छवि शुरू में छिपी हुई है और केवल तभी दिखाई जाती है जब वह सफलतापूर्वक लोड हो जाती है। इसका एक नुकसान है: उपयोगकर्ताओं को आधी भरी हुई छवियां नहीं दिखाई देंगी। और यदि उपयोगकर्ता ने JS को अक्षम कर दिया है तो वे कभी भी कोई चित्र नहीं देखेंगे

Comments

... और उपयोगकर्ता कुछ भी नहीं देखेंगे, अगर जावास्क्रिप्ट अक्षम है!

— yckart

@yckart ठीक है, अगर उपयोगकर्ताओं को जावास्क्रिप्ट अक्षम किया गया है, तो सबसे उपयोगी वेब एप्लिकेशन वैसे भी काम नहीं करेंगे ...

— awe

<img src="..." onerror="this.style.display = 'none'"/>आधे-लोड और गैर-जेएस ब्राउज़र मामलों के लिए बेहतर काम कर सकता है?

Answer 4

प्रत्येक छवि त्रुटि को छिपाने के लिए, बस इस जावास्क्रिप्ट को अपने पृष्ठ के निचले भाग में जोड़ें (बॉडी टैग से ठीक पहले):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Comments

यह मेरा पसंदीदा तरीका है क्योंकि यह बहुत सुनिश्चित करता है कि छवियों के गलत होने से पहले ऑनरर इवेंट्स बाध्य हैं और आपको प्रत्येक छवि टैग में ऑनरर विशेषताओं को जोड़ना नहीं है। इस कोड को अपने सभी इमेज टैग के बाद अवश्य डालें लेकिन किसी भी अन्य जावास्क्रिप्ट से पहले जो कि <body> में है, अन्यथा छवि के त्रुटि के बाद एक अवरुद्ध बाहरी JS लोड निष्पादन का कारण बन सकता है।

— गलातियों

यह मेरे लिए काम करता है, साथ ही गैलाटियन की सलाह के साथ, इस जेएस को कुछ भी करने से पहले निष्पादित करने की आवश्यकता है जो इसे देरी कर सकता है।

— अदमज

यह मूल प्रश्न का उत्तर देता है, लेकिन यह एक तरह से प्रक्रिया है। बाद में फिर से दिखाई देने वाली छवियों को लोड करने के लिए, एक ऑनलोड घटना भी जोड़ें। allimgs [i] .onload = function () {this.style.visibility = "दृश्यमान"; };

— TRT 1968

Answer 5

उत्तर देने में थोड़ी देर हो सकती है, लेकिन यहाँ मेरा प्रयास है। जब मैंने उसी मुद्दे का सामना किया, तो मैंने छवि के आकार का एक div का उपयोग करके और इस div के लिए पृष्ठभूमि-छवि सेट करके इसे ठीक किया। यदि छवि नहीं मिली है, तो div को पारदर्शी बनाया गया है, इसलिए इसके सभी चुपचाप जावा स्क्रिप्ट कोड के बिना किया जाता है।

Answer 6

एंडी ई के उत्तर पर एक त्वरित शोध करना , इसके live()बांधने के लिए संभव नहीं है error।

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

इसलिए आपको जाना होगा

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

सीधे error event handlerएक नया तत्व बनाने पर बंधन ।

Comments

+1, इसका कारण यह है कि ऑनरोर DOM इवेंट बबल नहीं है। ईवेंट पदानुक्रम को आगे बढ़ाते हुए लाइव और डेलिगेट का काम डोम पदानुक्रम को आगे बढ़ाता है और ईवेंट को कैप्चर करता है क्योंकि यह बुलबुले बनाता है। बेशक, jQuery के देवियों ने कुछ घटनाओं के लिए इसके चारों ओर काम किया है जैसे कि फोकस और धुंधला

— एंडी ई

@ एंडी ई: याय, वे पहले से ही इस तरह से काम कर रहे हैं कि, इसके लिए एक समान काम करने के लिए विचारों का सबसे बुरा नहीं हो सकता है error। nice to haveमेरे लिए ऐसा लगता है।

— jAndy

Answer 7

मुझे यह करने के लिए एक निफ़्टी विधि मिल गई है, जबकि अभी भी कार्यात्मक है जब यह ng-srcAngular.js और जैसे निर्देशन का उपयोग कर रहा है ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

यह मूल रूप से सबसे छोटा पारदर्शी GIF है (जैसा कि देखा गया है http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%D1%8C%D1%8E%D1%82/82% D0% B5% डी 1% 80 / [20,121,112]% 20The% 20smallest% 20transparent% 20pixel.html )

बेशक इस gif को कुछ वैश्विक वैरिएबल के अंदर रखा जा सकता है ताकि यह टेम्प्लेट को गड़बड़ न करे।

<script>
  window.fallbackGif = "..."
</script>

और उपयोग करें

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

आदि।

Answer 8

बस सरल सीएसएस का उपयोग करें

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}