केवल CSS / HTML का उपयोग करके छवि टूटे हुए आइकन को कैसे छिपाएं?

Question

मैं टूटी हुई छवि आइकन को कैसे छिपा सकता हूं? उदाहरण :

मेरे पास त्रुटि के साथ एक छवि है:

<img src="Error.src"/>

समाधान सभी ब्राउज़रों में काम करना चाहिए।

Comments

मैंने alt = "" सेट करने की कोशिश की, और टेग बैकग्राउंड को फेंकने के लिए सेट किया गया CSS लाइव: {बैकग्राउंड: url (src), चौड़ाई: ...; ऊँचाई: ..} लेकिन यह सच नहीं है। मेरा img टैग छुपाना चाहिए फिर src टूट गया है।

— गेरय सुइनोव

यहां एक संभावित समाधान देखें - stackoverflow.com/questions/18484753/… लेकिन हालांकि JS की आवश्यकता है। आप अकेले सीएसएस के साथ ऐसा नहीं कर सकते।

— जोहान्ड्रेड

देखें w3schools.com/jsref/event_onerror.asp "onerror" विशेषता

— Amy.js

Answer 1

सीएसएस / एचटीएमएल के लिए यह जानने का कोई तरीका नहीं है कि क्या छवि टूटी हुई कड़ी है, इसलिए आपको जावास्क्रिप्ट का उपयोग करना होगा, इससे कोई फर्क नहीं पड़ता

लेकिन यहां छवि को छिपाने या बैकअप के साथ स्रोत को बदलने के लिए एक न्यूनतम विधि है।

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

या

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

अपडेट करें

आप इस तर्क को कई छवियों पर एक साथ कुछ इस तरह से लागू कर सकते हैं:

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

अपडेट २

एक के लिए सीएसएस विकल्प देख michalzuber का जवाब नीचे। आप संपूर्ण छवि को छिपा नहीं सकते, लेकिन आप बदलते हैं कि टूटा हुआ आइकन कैसा दिखता है।

Comments

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

— निक स्टील

इसने मेरे लिए <ऑब्जेक्ट> दृष्टिकोण के बजाय काम किया क्योंकि मुझे छवि को एक घोषित मार्जिन की आवश्यकता थी, लेकिन केवल अगर एक वैध छवि पाई गई थी, अन्यथा मुझे शून्य स्थान लेने की आवश्यकता थी। <ऑब्जेक्ट> में ऑनरर ईवेंट नहीं है, इसलिए वहां कोई विकल्प नहीं था। खाली, छद्म वर्ग का उपयोग करके, मार्जिन को हटाने के लिए एक शैली नियम, कभी भी ऑब्जेक्ट पर ट्रिगर नहीं किया गया था।

— जॉन हटन

मेरा एक सवाल है। क्या प्रत्येक छवि टैग में स्क्रिप्ट की इस विशेष पंक्ति को देने के बजाय पृष्ठ पर प्रत्येक छवि टैग के लिए आवेदन करने के लिए स्क्रिप्ट को आम देना संभव है। धन्यवाद @ केविन जैंजर

— लेमडोर

@ लेमडोर - हां, आपको लोड पर छवियां खोजने और प्रत्येक को सामान्य फ़ंक्शन को संलग्न करने की आवश्यकता होगी। इसे पूरा करने के लिए आप jQuery या वेनिला JS का उपयोग कर सकते हैं (मैंने एक उदाहरण के साथ अपना उत्तर अपडेट किया है)

— केविन जैंजर

ReactJs में ऐसा करना बहुत आसान है, वही सिद्धांत वहां लागू होता है। इस ट्यूटोरियल को यहाँ देखें - youtu.be/90P1_xCaim4 । छवि के लिए प्रीलोडर ( youtu.be/GBHBjv6xfY4 ) जोड़ना भी संक्रमण को छुपाता है और एक अच्छा UX प्रदान करने में मदद करता है।

— प्रेम

Answer 2

लोग यहाँ क्या कह रहे हैं, इसके बावजूद आपको जावास्क्रिप्ट की आवश्यकता नहीं है, आपको सीएसएस की भी आवश्यकता नहीं है !!

यह वास्तव में केवल HTML के साथ बहुत ही उल्लेखनीय और सरल है। यदि छवि लोड नहीं होती है, तो आप एक डिफ़ॉल्ट छवि भी दिखा सकते हैं । ऐसे...

यह सभी ब्राउज़रों पर भी काम करता है, यहां तक ​​कि IE8 (250,000+ आगंतुकों में से जिनको मैंने सितंबर 2015 में होस्ट किया था, ज़ीरो लोगों ने IE8 से भी बदतर कुछ इस्तेमाल किया, जिसका अर्थ है कि यह समाधान वस्तुतः सब कुछ के लिए काम करता है )।

चरण 1: एक के रूप में छवि संदर्भ वस्तु एक के बजाय img । जब ऑब्जेक्ट विफल होते हैं तो वे टूटे हुए आइकन नहीं दिखाते हैं; वे सिर्फ कुछ नहीं करते हैं। IE8 से शुरू करते हुए, आप वस्तु और Img टैग का परस्पर उपयोग कर सकते हैं। आप नियमित छवियों के साथ सभी शानदार सामानों का आकार बदल सकते हैं और कर सकते हैं। ऑब्जेक्ट टैग से डरो मत; यह सिर्फ एक टैग है, कुछ भी बड़ा और भारी नहीं है और यह कुछ भी धीमा नहीं करता है। आप बस दूसरे नाम से img टैग का उपयोग करेंगे। एक गति परीक्षण से पता चलता है कि वे पहचान के लिए उपयोग किए जाते हैं।

चरण 2: (वैकल्पिक, लेकिन भयानक) उस वस्तु के अंदर एक डिफ़ॉल्ट छवि छड़ी। यदि आप चाहते हैं कि छवि वास्तव में ऑब्जेक्ट में लोड हो , तो डिफ़ॉल्ट छवि दिखाई नहीं देगी। उदाहरण के लिए, आप उपयोगकर्ता अवतार की एक सूची दिखा सकते हैं, और यदि किसी के पास सर्वर पर अभी तक कोई छवि नहीं है, तो वह प्लेसहोल्डर छवि दिखा सकता है ... कोई जावास्क्रिप्ट या सीएसएस की आवश्यकता नहीं है, लेकिन आपको इसकी विशेषताएं मिलती हैं ज्यादातर लोग जावास्क्रिप्ट लेते हैं।

यहाँ कोड है ...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... हाँ, यह इतना आसान है।

यदि आप सीएसएस के साथ डिफ़ॉल्ट छवियों को लागू करना चाहते हैं, तो आप इसे इस तरह से अपने HTML में और भी सरल बना सकते हैं ...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

... और बस इस उत्तर से सीएसएस जोड़ें -> https://stackoverflow.com/a/32928240/3196360

Comments

किसी तरह मैं इस विचार से पूरी तरह से चूक गया, जब यह पूर्वव्यापी में इतना स्पष्ट है! दुर्भाग्य से, मुझे नहीं लगता है कि ऑब्जेक्ट टैग इनायत से संवेदनशील छवियों को संभाल सकता है जैसे कि हम img.srcset संपत्ति पर देखना शुरू कर रहे हैं :(

— विंडगाज़र

महान विचार, इसके लिए धन्यवाद! साइड नोट पर, ऑब्जेक्ट-टैग स्क्रॉल व्हील को ब्लॉक कर रहा है (मेरे कार्यान्वयन में, कम से कम) ... यदि आपके साथ ऐसा होता है, तो बस object { pointer-events: none; }अपने CSS में उपयोग करें (स्रोत: stackoverflow.com/a/16534300 )

— DHainzl

यह छवि टैग के शब्दार्थ को तोड़ता है, यद्यपि। मुझे नहीं पता कि क्या <object>टैग के बजाय खोज इंजन आपके टैग का उपयोग करना पसंद करेंगे <img>। क्या यह दृष्टिकोण HTML5-अनुरूप है और सभी प्रमुख ब्राउज़रों द्वारा सही ढंग से प्रस्तुत किया गया है?

— पीटर

यह HTML4 अनुरूप (1997 से अनुपालन) है और IE8 / 2009 के बाद से सभी प्रमुख ब्राउज़रों द्वारा सही ढंग से प्रस्तुत किया गया है (अन्य ब्राउज़रों ने इसे बहुत पहले किया था)। अगर एक खोज इंजन एक छवि प्रकार के साथ एक वस्तु को नहीं समझता है, तो यह एक छवि है, यह कल्पना करने के लिए 19 साल का समय था, इसलिए यह शायद एक बहुत अच्छा इंजन नहीं है ... सड़क पर चलने वाली कारों पर काम करने वाले किशोर अब नहीं थे यहां तक ​​कि जब यह समाधान चश्मा से मिला तो कल्पना की ... आप कितनी दूर जाना चाहते हैं? :) यह एक चट्टान-ठोस समाधान है।

— निक स्टील

@MonsterMMORPG क्योंकि यह जावास्क्रिप्ट का उपयोग नहीं करता है, और आपको हमेशा (उदाहरण के लिए, ईमेल संदेश के एक निकाय में) अनुमति नहीं दी जाती है।

— ForNeVeR

Answer 3

Https://bitsofco.de/styling-broken-images/ पर एक शानदार समाधान मिला

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

Comments

सीएसएस का उपयोग करते हुए विशुद्ध रूप से समाधान जो स्वीकृत उत्तर होना चाहिए। इससे जुड़ा लेख पुराना है, क्योंकि ब्राउज़र समर्थन अब 97,87% है: caniuse.com/#feat=css-gencontent ।

— holm50

लिंक किए गए लेख में इस बारे में एक उत्कृष्ट व्याख्या है कि ब्राउज़र छवियों को कैसे संभालते हैं, लेकिन ध्यान रखें कि यह समाधान केवल तभी काम करता है जब आपके पास एक ठोस पृष्ठभूमि हो और आप उसी ठोस रंग के किसी अन्य बॉक्स के साथ या किसी अन्य छवि के साथ सब कुछ कवर करना चाहते हों । यह समाधान वास्तव में टूटी हुई छवि आइकन को हटा या छिपा नहीं रहा है, यह सिर्फ इसे कवर कर रहा है।

— क्लाउडियो फ्लोरियन

क्रोम 70 पर, यह पक्षी + को एक टूटी हुई छवि आइकन दिखाता है :(

— साइमन अर्नोल्ड

^ फ़ायरफ़ॉक्स 63 पर समान

— dailysleaze

@dailysleaze - फ़ायरफ़ॉक्स 64+ पर, यह स्थानांतरित हो गया img[alt]::before। आप चाहें display:inline-blockतो इसका उपयोग कर सकते हैं , क्योंकि यह मूल के करीब है।

— एडम काटज़

Answer 4

यदि आप टेक्स्ट alt = "abc" के साथ alt जोड़ेंगे तो यह शो को थम्बनेल भ्रष्ट दिखाएगा, और ऑल्ट मैसेज एबीसी

<img src="pic_trulli.jpg" alt="abc"/>

यदि आप पूरी तरह नहीं जोड़ेंगे, तो यह शो को थम्बनेल को भ्रष्ट दिखाएगा

<img src="pic_trulli.jpg"/>

यदि आप टूटे हुए को जोड़ना चाहते हैं तो बस alt = "" यह भ्रष्ट थंबनेल और कोई भी Alt संदेश (js का उपयोग किए बिना) नहीं दिखाएगा

<img src="pic_trulli.jpg" alt=""/>

यदि आप टूटे हुए को छिपाना चाहते हैं, तो बस alt = "" और onerror = "this.style.display = 'none' जोड़ें, यह भ्रष्ट थंबनेल और कोई भी alt संदेश (js के साथ) नहीं दिखाएगा

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

4th one थोड़ा खतरनाक है (बिल्कुल नहीं), यदि आप onerror इवेंट में किसी भी छवि को जोड़ना चाहते हैं, तो यह प्रदर्शित नहीं होगा भले ही Image मौजूद हो। style.display जोड़ने जैसा है। इसलिए, इसका उपयोग तब करें जब आपको प्रदर्शित करने के लिए किसी वैकल्पिक छवि की आवश्यकता न हो।

display: 'none'; // in css

यदि हम इसे CSS में देते हैं, तो आइटम प्रदर्शित नहीं होगा (जैसे छवि, iframe, div ऐसा)।

यदि आप छवि प्रदर्शित करना चाहते हैं और आप पूरी तरह से रिक्त स्थान प्रदर्शित करना चाहते हैं यदि त्रुटि है, तो आप उपयोग कर सकते हैं, लेकिन यह भी ध्यान रखें कि यह कोई स्थान नहीं लेगा। तो, आपको इसे एक div में रखने की आवश्यकता हो सकती है

लिंक https://jsfiddle.net/02d9yshw/

Comments

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

— velkoon

Answer 5

मुझे लगता है कि सबसे आसान तरीका है कि टेक्स्ट-इंडेंट संपत्ति द्वारा टूटी हुई छवि आइकन को छिपाना।

img {
    text-indent: -10000px
}

यदि आप "alt" विशेषता देखना चाहते हैं तो स्पष्ट रूप से यह काम नहीं करता है।

Comments

सबसे आसान तरीका।

— ऐरासन टुट्टॉन्गकम

Answer 6

यदि आप छवि को प्लेसहोल्डर के रूप में रखना चाहते हैं / चाहते हैं, तो आप छवि आकार सेट करने के लिए ओपेरर और कुछ CSS के साथ अपारदर्शिता को 0 में बदल सकते हैं। इस तरह आपको टूटी हुई लिंक दिखाई नहीं देगी, लेकिन पेज सामान्य रूप से लोड होता है।

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

Answer 7

मैं इसे पसंद किया जवाब से निक और इस समाधान के साथ चारों ओर खेल रहा था। एक क्लीनर विधि मिली। चूँकि: pseudos के बाद im / :: के बाद बदले हुए तत्व जैसे कि img और ऑब्जेक्ट पर काम नहीं करते हैं, वे केवल तभी काम करेंगे जब ऑब्जेक्ट डेटा (src) लोड न हो। यह HTML को अधिक साफ रखता है और केवल छद्म को जोड़ेगा यदि ऑब्जेक्ट लोड करने में विफल रहता है।

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

Answer 8

अगर आपको अभी भी इमेज कंटेनर दिखाई दे रहा है, तो यह बाद में भरा होने के कारण दिखाई नहीं देता है और इसे दिखाने और छुपाने से आप परेशान नहीं होना चाहते हैं, तो आप src के अंदर 1x1 पारदर्शी छवि को चिपका सकते हैं:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

मैंने इस सटीक उद्देश्य के लिए इसका इस्तेमाल किया। मेरे पास एक छवि कंटेनर था जो कि अजाक्स के माध्यम से इसमें एक छवि लोड करने वाला था। क्योंकि छवि बड़ी थी और लोड करने में थोड़ा समय लगा, इसलिए इसे Gif लोडिंग बार के CSS में बैकग्राउंड-इमेज सेट करने की आवश्यकता थी।

हालाँकि, क्योंकि src खाली था, टूटा हुआ छवि आइकन अभी भी उन ब्राउज़रों में दिखाई दिया जो इसका उपयोग करते हैं।

पारदर्शी 1x1 Gif को सेट करना इस समस्या को बस और प्रभावी रूप से CSS या जावास्क्रिप्ट के माध्यम से बिना किसी कोड परिवर्धन के ठीक करता है।

Comments

केवल यही उत्तर कि सभी अन्य लोगों ने एक सफेद रूपरेखा छोड़ दी

— Futurelucas4502

Answer 9

CSS का उपयोग करना केवल कठिन है, लेकिन आप टैग के background-imageबजाय CSS का उपयोग कर सकते हैं <img>...

कुछ इस तरह:

एचटीएमएल

<div id="image"></div>

सीएसएस

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

यहाँ एक काम कर रहे बेला है ।

नोट: मैंने सीएसएस को फेल्ड पर सीएसएस में सिर्फ यह दिखाने के लिए जोड़ा कि छवि कहां होगी।

Comments

यह अच्छा है, लेकिन मेरे लिए यह समाधान नहीं है :) img टैग hered तो src टूट गया है, div - नहीं :(

— Geray Suinov

@GeraySuinov तब आपको जावास्क्रिप्ट का उपयोग करना पड़ सकता है

— ड्रायडेन लॉन्ग

Answer 10

ऑब्जेक्ट टैग का उपयोग करें। इस तरह टैग के बीच वैकल्पिक पाठ जोड़ें:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

Answer 11

के बाद से 2005 , मोज़िला ब्राउज़र जैसे फ़ायरफ़ॉक्स अमानक का समर्थन किया है :-moz-brokenसीएसएस छद्म वर्ग है कि वास्तव में इस अनुरोध को पूरा कर सकते हैं:

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::beforeफ़ायरफ़ॉक्स 64 में भी काम करता है (हालांकि एक समय ऐसा था img[alt]::afterइसलिए यह विश्वसनीय नहीं था )। मुझे Chrome 71 में काम करने के लिए या तो नहीं मिल सकता है।

Comments

दिलचस्प है ... क्या आप जानते हैं कि क्रोम में एक समान छद्म वर्ग है?

— 1000Gbps

@ 1000Gbps - जब मुझे वह उत्तर मिला तो मैं एक नहीं ढूंढ सका और कम से कम त्वरित वेब प्रश्नों के साथ और मोज़िला बग 11011 को देखते हुए अब एक भी नहीं ढूंढ सकता । यदि आप चाहें, तो आप वास्तव में क्रोमियम (क्रोम के लिए अपस्ट्रीम) में इस तरह का अनुरोध कर सकते हैं, लेकिन जैसा कि यह गैर-मानक है, कोई आश्वासन नहीं है कि वे ऐसा करेंगे।

— एडम काटज़

मुझे बहुत संदेह है कि वे इसे कम समय में करेंगे, इस बात को ध्यान में रखते हुए कि उनके पास मेरे द्वारा बताए गए कुछ बुरा कीड़े से निपटने के लिए एक कठिन समय था ... इस तथ्य से कोई फर्क नहीं पड़ता कि अंतर्निहित छद्म कक्षाएं इस तरह से एक से दूर हो जाएंगी उसी कारण से लिखे गए जेएस कोड के बहुत सारे ढांचे

— 1000 जीबीपीएस

Answer 12

आप एक सीएसएस समाधान के रूप में इस पथ का अनुसरण कर सकते हैं

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

Comments

पहले मैं सोच रहा था कि यह एक अच्छा समाधान है लेकिन यह IE पर काम नहीं कर रहा है। सीएसएस के बाद प्रदर्शन ब्लॉक को जोड़ने पर भी नहीं

— ग्लेन फ्रेंकटन

Answer 13

गुम छवियां या तो कुछ भी नहीं दिखाएंगी, या [एक प्रदर्शित करें? ] शैली बॉक्स जब उनका स्रोत नहीं मिल सकता है। इसके बजाय आप एक "लापता छवि" ग्राफ़िक के साथ प्रतिस्थापित करना चाहते हैं जो आपको यकीन है कि मौजूद है इसलिए बेहतर दृश्य प्रतिक्रिया है कि कुछ गलत है। या, आप इसे पूरी तरह से छिपाना चाह सकते हैं। यह संभव है, क्योंकि जो ब्राउज़र एक "त्रुटि" जावास्क्रिप्ट घटना से आग नहीं पा सकते हैं, हम उनके लिए देख सकते हैं।

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

इसके अतिरिक्त, आप किसी साइट व्यवस्थापक को ईमेल भेजने के लिए किसी प्रकार की अजाक्स कार्रवाई को ट्रिगर कर सकते हैं जब ऐसा होता है।

Answer 14

के साथ चाल img::afterएक अच्छा सामान है, लेकिन कम से कम 2 downsides है:

1. सभी ब्राउज़रों द्वारा समर्थित नहीं है (जैसे एज https://codepen.io/dsheiko/pen/VgYErm पर काम नहीं करता है )
2. आप बस छवि को छिपा नहीं सकते हैं, आप इसे कवर करते हैं - इसलिए उपयोगी नहीं जब आप मामले में डिफ़ॉल्ट छवि दिखाते हैं

मैं जावास्क्रिप्ट के बिना एक सार्वभौमिक समाधान नहीं जानता, लेकिन फ़ायरफ़ॉक्स के लिए केवल एक अच्छा है:

img:-moz-broken{
  opacity: 0;
}

Answer 15

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

उदाहरण:

<img class="img_gal" alt="" src="awesome.jpg">

इसे देखने की कोशिश करो! ;)

Comments

जो कि ब्राउज़र पर निर्भर करता है। क्रोम में आपके पास अभी भी (यहां खाली) अल्ट टेक्स्ट के अलावा इमेज बॉर्डर और टूटा हुआ इमेज आइकन भी होगा।

— पणजी

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

— जेपी डेविस

@panzi मैंने समाधान का परीक्षण किया और ऐसा लगता है जैसे Chrome ने अपना व्यवहार बदल दिया है। यह टूटी हुई छवि आइकन को प्रस्तुत नहीं करेगा यदि alt=""। वही फ़ायरफ़ॉक्स के लिए चला जाता है।

— फिलिप मटरर

Answer 16

भविष्य के googlers के लिए, 2016 में विशेषता चयनकर्ता का उपयोग करके खाली छवियों को छिपाने का एक ब्राउज़र सुरक्षित शुद्ध सीएसएस तरीका है:

img[src="Error.src"] {
    display: none;
}

संपादित करें: मैं वापस आ गया हूं - भविष्य के गोगलर्स के लिए, 2019 में शैडो डोम में वास्तविक ऑल्ट टेक्स्ट और ऑल टेक्स्ट इमेज को स्टाइल करने का एक तरीका है, लेकिन यह केवल डेवलपर टूल में काम करता है। इसलिए आप इसका उपयोग नहीं कर सकते। माफ़ करना। यह कितना अच्छा होगा।

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}

Comments

img[src=''] { display: none; } यह eBay html केवल टेम्पलेट्स के साथ फिर से प्रासंगिक हो गया

— im34