HTML यदि छवि नहीं मिली है

97

मेरे पास HTML पृष्ठ में एक छवि है:

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

यदि सर्वर पर छवि नहीं मिली है तो यह एक बदसूरत खाली वर्ग दिखाता है।

मैं इसे बनाना चाहता हूं ताकि यदि कोई छवि नहीं मिलती है तो यह कुछ भी या कुछ अन्य डिफ़ॉल्ट छवि नहीं दिखाएगा जो मुझे पता है कि निश्चित रूप से सर्वर पर है।

यह कैसे किया जा सकता है?

html

— David19801
स्रोत

2

मुझे फेवीकोन मिल रहा है, कुछ साइटों में नहीं है।

— डेविड

उस स्थिति में, शायद सर्वर-साइड या क्लाइंट-साइड अनुरोध पहले यह देखने के लिए कि क्या स्थिति कोड वापस आता है?

— पेक्का

मैं js का उपयोग नहीं करने की कोशिश कर रहा हूं क्योंकि मुझे धीमी वेबसाइट पसंद नहीं है और इसे सर्वर साइड करने के लिए बहुत से फेविकॉन भी मिलते हैं, यह सर्वर को प्रतिबंधित कर देगा।

— डेविड

9

वह कौन बेवकूफ है जिसने आपको जावास्क्रिप्ट कहा था कि वेबसाइट धीमी हो जाएगी ??

— Qchmqs

@Pekka P बेशक आपके पास साइट पर कामकाज लिंक होना चाहिए। क्या होगा यदि लिंक आपकी अपनी साइट पर नहीं हैं, लेकिन किसी और के हैं? या क्या होगा अगर वे एक दूरस्थ डेटा स्टोर से आ रहे हैं और डाउनलोड करने में कुछ समय ले रहे हैं?

— लेथेगुए

265

अपनी समस्या को हल करने का सबसे अच्छा तरीका:

<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

onerror आपके लिए एक अच्छी बात है :)

बस छवि फ़ाइल नाम बदलें और अपने आप को आज़माएं।

— रॉबी शॉ
स्रोत

4

एक उपयोगी ऑल्ट टैग के साथ संयुक्त यह समस्या को हल करने का एक शानदार तरीका है!

— mlibby

2

गजब का! सही समाधान

— इमानुएल पावनेलो

5

यदि Default.jpg उपलब्ध नहीं है, तो आप एक अंतहीन लूप में समाप्त हो जाएंगे। आपको if (this.src != 'Default.jpg')

— बजे

7

अनंत छोरों से बचने के लिए और अगर: this.onerror=null;@ सुदर्शन द्वारा नीचे दिए गए से बेहतर है।

— गिलौम एफ।

प्रतिक्रिया के साथ काम करने वाला कोई भी व्यक्ति, आप यहां उल्लेख कर सकते हैं stackoverflow.com/questions/34097560/…

— अर्ली

17

वैसे आप यह कोशिश कर सकते हैं।

  <object data="URL_TO_Default_img.png" type="image/png">
   <img src="your_original_image.png" />
  </object>

यह मेरे लिए काम किया। मुझे तुम्हारे बारे में पता है।

— सुदर्शन कालेबेरे
स्रोत

4

लगता है सभी प्रमुख ब्राउज़रों में काम करता है। बस डिफ़ॉल्ट और मूल स्वैप करें। तो वह वस्तु मूल छवि प्रस्तुत करती है और डिफ़ॉल्ट रूप से एक

— इवान्

10

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

<img src="path_to_original_img/img.png"  alt="Sorry! Image not available at this time" 
       onError="this.onerror=null;this.src='<?=base_url()?>assets1/img/default.jpg';">

— सुदर्शन कालेबेरे
स्रोत

1

यदि आप पृष्ठ को खोज इंजनों द्वारा सही ढंग से पार्स किया जाना चाहते हैं, तो त्रुटि ग्रंथों के लिए alt का उपयोग न करें। खोज इंजन आपके सामग्री डेटा को गलत तरीके से अनुक्रमित कर सकता है।

— वरेला

क्या करता <?=base_url()?>है? आप आश्चर्यजनक रूप से कुछ सर्वर-साइड और फ्रेमवर्क-आधारित कोड क्यों जोड़ते हैं?

— निको हसे

@NicoHaase अपने url को php फ्रेमवर्क से, अच्छी तरह से आप हमेशा छवि के लिए अपना स्वयं का url लिख सकते हैं, मैंने एक उदाहरण दिया है कि doesn't का मतलब है कि आप इसे कॉपी और पेस्ट करें या उस url पर ध्यान केंद्रित करें, आप अपने url को इसमें शामिल करते हैं। समझाने के लिए आपको उदाहरण देना होगा इसलिए मैंने किया।

— सुदर्शन कालेबेरे

3

यहां नीचे दिए गए कोड स्निपेट की जांच करें, जिसमें, मैंने छवि नाम को याद किया। तो, सिर्फ इसलिए कि यह वैकल्पिक छवि दिखा रहा है जैसा कि छवि नहीं मिली (404.svg)।

<img id="currentPhoto" src="https://www.ccrharrow.org/Images/content/953/741209.pg" onerror="this.src='https://www.unesale.com/ProductImages/Large/notfound.png'" alt="">

स्निपेट का विस्तार करें

— कृष्णा अमरघड़े
स्रोत

1

इस परिदृश्य को संभालने का सामान्य तरीका altटैग को कुछ सार्थक करने के लिए है।

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

<img src="ImageHandler.aspx?Img=Blue.jpg" alt="I am a picture" />

में ImageHandler.aspxकोड, किसी भी फाइल नहीं पाया त्रुटियों को पकड़ने और अपने सेवा default.jpgके बजाय।

— Widor
स्रोत

1

आप एक वैकल्पिक पाठ जोड़कर दिखा सकते हैं alt:

<img src="my_img.png" alt="alternative text" border="0" />

— juankysmith
स्रोत

शायद यह वर्ग div (या अन्य टैग) से आता है जिसमें आपका img शामिल है

— juankysmith

alt काम नहीं करता है अगर img प्रदर्शन शैली 'ब्लॉक' है

— user3342930

1

मैंने छवि के चारों ओर एक पैरेंट डिव को जोड़ा और मूल छवि को छिपाने के लिए निम्न ऑनर इवेंट हैंडलर का उपयोग किया क्योंकि IE में अभी भी एक बदसूरत छवि नहीं मिली, जो पूरी विशेषता का उपयोग करने के बाद दिखाई गई छवि है:

<div style=" width:300px; height:150px; float:left; margin-left:5px; margin-top:50px;">
        <img src='@Url.Content("~/Images/Logo-Left.png")' onerror="this.parentElement.innerHTML = '';" />
</div>

— पैट्रिक Koorevaar
स्रोत

1

विकल्प के लिए, यदि छवि मौजूद नहीं है - कुछ भी नहीं दिखाएं। (मैं क्या देख रहा था)

आप "onerror" विशेषता में "this.remove ()" में रॉबी शॉ के जवाब से फ़ंक्शन को स्वैप कर सकते हैं।

<img id="currentPhoto" src="SomeImage.jpg" alt='1' width="100" height="120">
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.remove();" alt="2" width="100" height="120">

स्निपेट का विस्तार करें

— बीआईएम
स्रोत

0

बदसूरत वर्ग को दूर करने के लिए टैग border=0में उपयोग करने का प्रयास करें img।

<img src="someimage.png" border="0" alt="some alternate text" />

— अजीज शेख
स्रोत

0

मैं <img>टैग द्वारा कब्जा किए गए स्थान को छिपाना चाहता था इसलिए मेरे लिए यह काम किया

<img src = "source.jpg" alt = "" >

— दिव्यांशु जिम्मी
स्रोत

0

यदि आप पाठ के बजाय एक वैकल्पिक छवि चाहते हैं, तो आप php का भी उपयोग कर सकते हैं:

$file="smiley.gif";
$alt_file="alt.gif";
if(file_exist($file)){
     echo "<img src='".$file."' border="0" />";
}else if($alt_file){
     // the alternative file too might not exist not exist
     echo "<img src='".$alt_file."' border="0" />";
}else{
  echo "smily face";
}

— स्टीफन कोमू
स्रोत

0

इसे संभालने का सरल तरीका, बस एक पृष्ठभूमि छवि जोड़ें।

— vikas dhere
स्रोत

0

PHP की कोशिश करो

if (file_exists('url/img/' . $Image)) {
    $show_img_URL = "Image.jpg";
} else {
    $show_img_URL = "Image_not_found.jpg";
}

— SIAMWEBSITE
स्रोत

-1

मेरे लिए यह काम करता है कि यदि आप छवि को तोड़ने के लिए पूरी विशेषता का उपयोग नहीं करना चाहते हैं तो आप इस कोड के टुकड़े का उपयोग कर सकते हैं और तदनुसार सेट कर सकते हैं।

<h1>
  <a> 
   <object data="~/img/Logo.jpg" type="image/png">
     Your Custom Text Here
   </object>
  </a>
</h1>

— नासिर शफीक
स्रोत

-2

यह एक मेरे लिए काम किया। srcset का उपयोग करना। मैंने अभी इसके बारे में सीखा है, इसलिए मुझे नहीं पता कि क्या ब्राउज़र इसका समर्थन करते हैं लेकिन इसने मेरे लिए काम किया है। इसे आज़माएं और बाद में मुझे अपना फ़ीड वापस दें।

 <img src="smiley.gif" srcset="alternatve.gif" width="32" height="32" />

— स्टीफन कोमू
स्रोत

-21

समाधान - मैंने img की ऊंचाई और चौड़ाई तत्वों को हटा दिया और फिर Alt पाठ ने काम किया।

<img src="smiley.gif" alt="Smiley face" width="32" height="32" />

सेवा

<img src="smiley.gif" alt="Smiley face" />

आप सभी को धन्यवाद।

— David19801
स्रोत

17

तो आपने अपने आप को "सही उत्तर" दिया, लेकिन आपने एक प्रश्न के उत्तर के साथ उत्तर दिया, जीजी WP।

— जीन-पॉल

ओह, इस लड़के ने इस सही जवाब के बारे में अपना जवाब खुद ही स्वीकार कर लिया, हाहा, खुद को खुश रखने का अच्छा तरीका है।

— सुदर्शन कालेबेरे

यह पहली बार नहीं है: D stackoverflow.com/a/12768098/1545917

— Ghilas BELHADJ

इस उत्तर ने एक वैकल्पिक छवि प्रदान नहीं की।

— पैट्रिक नॉट

@ david19801 देखभाल के बारे में बताएं?

— पी सतीश पात्रो