छवि प्लेसहोल्डर

मैंने पृष्ठभूमि रंग के साथ छवि टैग को परिभाषित किया है ताकि यदि कोई छवि न हो तो रंग दिखाना चाहिए लेकिन फिर भी टूटा हुआ छवि आइकन यह दिखा रहा है कि इसे कैसे निकाला जाए?छवि प्लेसहोल्डर

मैं jquery या किसी भी ढांचे को जोड़कर पेज को भारी नहीं बनाना चाहता, मैं छवियों में किसी भी प्रकार के divs को जोड़ नहीं सकता क्योंकि साइट लगभग पूरी हो चुकी है।

मिले केवल जावास्क्रिप्ट

function ImgError(source){ 
source.src = "/images/noimage.gif"; 
source.onerror = ""; 
return true; 
} 

<img src="someimage.png" onerror="ImgError(this);"/>

स्रोत

2012-01-24 Pradyumna Challa

आप 'alt' विशेषता निर्दिष्ट कर सकते हैं उदा। ' my cute cat 'तो वैकल्पिक पाठ आपके द्वारा लागू पृष्ठभूमि रंग के साथ दिखाई देगा। –

साथ जवाब आप छिपा कर सकते हैं कि का उपयोग करते हुए निम्नलिखित:

<img 
    src="my.png" 
    onerror="this.style.display='none'" 
/>

यदि आप किसी अन्य छवि प्रदर्शित कर सकते, तो छवि के रूप में पालन नहीं मिला:

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

स्रोत

2012-01-24 13:17:23

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

@ निकलॉकवुड या यह भी एक तरीका है –

मैं छवि टैग में मैन्युअल रूप से कुछ भी जोड़ नहीं सकता साइट पर कई टैग हैं। –

यह ब्राउज़र-निर्भर व्यवहार है, लेकिन आप इसके बारे में कुछ भी नहीं कर सकते हैं। यहां कुछ विकल्प दिए गए हैं:

1) छवि को एक आतंक हैंडलर जोड़ने के लिए जावास्क्रिप्ट का उपयोग करें जो इसे छुपाता है जब यह सीएसएस का उपयोग करके छिपाने के लिए सेटिंग्स द्वारा लोड करने में विफल रहता है (आपको लागू करने के लिए एक div div होना चाहिए पृष्ठभूमि रंग के रूप में पृष्ठभूमि रंग दिखाया नहीं जाएगा अगर छवि hdden है)।

jQuery के बिना साइट में प्रत्येक छवि में एक त्रुटि हैंडलर लागू करने के लिए और कोड को संशोधित किए बिना, आप इसे कर सकते हैं (पृष्ठ के अंत में इसे एक स्क्रिप्ट में रखें - यह <head> में काम नहीं करेगा और आप इसे विंडो में नहीं डाल सकते हैं। लोड या छवियों को लोड करने से पहले यह आग नहीं होगी)।

var images = document.getElementsByTagName('img'); 
for (i = 0; i < images.length; i++) { 
    images[i].onerror = function() { 
     this.style.visibility = 'hidden'; 
    } 
}

2) एक <img> टैग का उपयोग कर के बजाय एक div पर सीएसएस पृष्ठभूमि छवि के रूप में छवि सेट करें। यह अर्थपूर्ण नहीं है, लेकिन अगर यह लोड होने में विफल रहता है तो यह एक टूटा हुआ छवि आइकन प्रदर्शित नहीं करेगा, और आप अभी भी एक पृष्ठभूमि रंग और एक लेबल निर्दिष्ट कर सकते हैं (एक alt टैग नहीं)।

स्रोत

2012-01-24 13:17:33

यह कुछ ब्राउज़रों की एक विशेषता है - जहां तक मुझे याद है, फ़ायरफ़ॉक्स, क्रोम और सफारी कुछ भी नहीं दिखाते हैं जबकि इंटरनेट एक्सप्लोरर एक टूटा हुआ छवि आइकन दिखाता है। जावास्क्रिप्ट का उपयोग करने से कम, मुझे विश्वास नहीं है कि आप इस व्यवहार को ओवरराइड कर सकते हैं।

स्रोत

2012-01-24 13:18:09 MassivePenguin

कम से कम एफएफ में, आप 'img: -moz-broken {-moz-force-broken-image-icon: 1;} ' –

ब्राउज़र उस टूटा छवि आइकन करता है। यह ऐसा कुछ नहीं है जिसे आप कोड में बदल सकते हैं। मुझे लगता है कि आप पाएंगे कि विभिन्न ब्राउज़र अलग-अलग छवियों को अलग-अलग संभालते हैं।

आपको बस इतना करना है, हालांकि, अलग ढंग से नियंत्रित किया जा सकता है चाहता हूँ क्या ...

शैली:

div.image-maybe-missing { 
    width: 300px; 
    height: 450px; 
    background-color: red; 
    background-image: url("/images/is-it-there.png"); 
}

HTML:

<div class="image-maybe-missing"> 
</div>

यह आप के साथ एक खाली बॉक्स दे देंगे अगर छवि मौजूद नहीं है तो एक लाल पृष्ठभूमि। Div की चौड़ाई और ऊंचाई को छवि की चौड़ाई और ऊंचाई से मेल खाना चाहिए।

स्रोत

2012-01-24 13:24:37

के साथ आइकन को मजबूर कर सकते हैं लेकिन मूल छवि के बाद भी आईई लाल" एक्स "दिखाएगी नहीं मिला। – acme

एक साधारण समाधान का उपयोग करना होगा, सचमुच, प्लेसहोल्डर रिक्त छवि। यह आम तौर पर sprites के लिए प्रयोग किया जाता है लेकिन मुझे लगता है कि आप इसका भी उपयोग कर सकते हैं।

आप क्या करते हैं, आप पारदर्शिता सक्षम के साथ 1x1 पीएक्स खाली gif छवि बनाते हैं, खाली "src" को खाली करने के लिए निर्देशित करते हैं।gif और सीएसएस पृष्ठभूमि-छवि संपत्ति के माध्यम से छवियों को देते हैं। इसलिए, अगर पृष्ठभूमि छवि नहीं मिली है, तो यह टूटी हुई लिंक छवि नहीं दिखाएगी। 1x1 खाली png साथ

स्रोत

2012-01-24 14:19:50 Ege

आपको अवगत होना चाहिए हालांकि इसमें मामूली नकारात्मकता है। कॉर्स के अतिरिक्त छवि अनुरोध। जहां भी संभव हो, आप sprites का उपयोग करके इसका लाभ उठा सकते हैं, इसलिए छवि अनुरोधों की कुल संख्या में कमी आ रही है। – Ege

मैं 1px द्वारा 1px का बेस 64 प्रतिनिधित्व और जावास्क्रिप्ट में संग्रहीत करता हूं। यह नेटवर्क अनुरोध को खत्म कर देगा। बेस 64 छवियां थोड़ा कम कुशल हैं लेकिन 1 पीएक्स द्वारा 1 पीएक्स पर इससे कोई फर्क नहीं पड़ता। इसके अलावा, यदि आप एक स्प्राइट का उपयोग करते हैं तो आप केवल 1 पिक्सेल चुन सकते हैं जिसका उपयोग आप करना चाहते हैं क्योंकि यह तब भी डाउनलोड किया जाता है जब आप उस मार्ग पर जाते हैं। मैंने इसे नीचे उत्तर के रूप में पोस्ट किया। –

समाधान

 function ImgError(source){ 
      empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII="; 
      source.src = "data:image/png;base64," + empty1x1png; 
      source.onerror = ""; 
      return true; 
     } 

     <img src="someimage.png" onerror="ImgError(this);"/>

स्रोत

2013-02-11 19:08:44

this.remove प्रयास करें() टूटी हुई छवि प्लेसहोल्डर दूर करने के लिए:

<div class="cell"> 
    <p> 
    <img src="pic.png" onerror="this.remove();" /> 
    </p> 
</div>

मैं सेल divs का उपयोग लेआउट को बचाने के लिये।

स्रोत

2017-08-10 13:50:08 MannyC

छवि प्लेसहोल्डर

उत्तर

संबंधित मुद्दे