Html <img> का src विशेषता मान्य नहीं होने की स्थिति में एक डिफ़ॉल्ट छवि इनपुट करना?

268

क्या HTML <img>टैग में डिफ़ॉल्ट छवि को प्रस्तुत करने का कोई तरीका है , यदि srcविशेषता अमान्य है (केवल HTML का उपयोग करके)? यदि नहीं, तो इसके आसपास काम करने का आपका हल्का तरीका क्या होगा?

html image

— Galilyou
स्रोत

3

HTML में टूटी हुई छवियों के लिए कोई वापसी नहीं है। आपको टूटी हुई छवियों को खोजने और उनकी src विशेषता को बदलने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी।

— ब्लिक्स

2

@Blixt - क्या होगा यदि आपका क्लाइंट एमएस आउटलुक या कुछ अभिभावक EMAIL रीडर है और आपके पास जावास्क्रिप्ट नहीं है, और ऑब्जेक्ट विकल्प काम नहीं करता है ... मुझे लगता है कि एकमात्र समाधान alt / text है

— Xofo

319

आपने HTML के लिए केवल समाधान ही मांगा है ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>

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

चूंकि पहली छवि मौजूद नहीं है, इसलिए फॉलबैक (इस वेब साइट पर इस्तेमाल किए गए स्प्राइट्स) प्रदर्शित होंगे। और यदि आप वास्तव में पुराने ब्राउज़र का उपयोग कर रहे हैं जो समर्थन नहीं करता है object, तो यह उस टैग को अनदेखा करेगा और टैग का उपयोग करेगा img। संगतता के लिए caniuse वेबसाइट देखें । यह तत्व IE6 + के सभी ब्राउज़रों द्वारा व्यापक रूप से समर्थित है।

* जब तक छवि के लिए URL बदल न जाए (फिर से), जिस स्थिति में आप शायद सर्वोच्च पाठ देखेंगे।

— पैट्रिक मैक्लेनी
स्रोत

3

HTML 4.01 के लिए DTD में डालने के बाद IE8 में इसने मेरे लिए काम किया।

— पैट्रिक मैकलेन्नी

यह काम गैर मौजूदा छवि है अगर नहीं है X-Frame-Optionsकरने के लिए सेट SAMEORIGINया एक अधिक अनुमोदक सेटिंग।

— अत्तिला ओ

यह काम करता है लेकिन अगर object.data में लिंक पर भरोसा नहीं किया जाता है, तो यह सभी तरह के सामान को लोड कर सकता है ...

— Michael_Scharf

1

तत्व 'img' को 'ऑब्जेक्ट' तत्व के अंदर नहीं जोड़ा जा सकता है।

— मैथ्यूज मिरांडा

2

@ माथियस यकीन है कि यह कर सकते हैं। HTML4 ऑब्जेक्ट में प्रवाह सामग्री (लगभग सब कुछ, जिसमें img भी शामिल है) हो सकती है, और HTML5 में यह पारदर्शी है, इसका अर्थ है कि इसमें कोई भी मान्य HTML5 हो सकता है।

— पैट्रिक मैक्लेनी

318

यह मेरे लिए अच्छा काम करता है। शायद आप ईवेंट को हुक करने के लिए JQuery का उपयोग करना चाहते हैं।

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

Jacquargs त्रुटि गार्ड के साथ अपडेट किया गया

अपडेट किया गया: सीएसएस केवल समाधान मैंने हाल ही में विटाली फ्रीडमैन डेमो देखा एक महान सीएसएस समाधान जिसका मुझे पता नहीं था। contentसंपत्ति को टूटी हुई छवि पर लागू करने का विचार है । आम तौर पर :afterया :beforeछवियों पर लागू नहीं होता है, लेकिन जब वे टूट जाते हैं, तो वे लागू होते हैं।

<img src="nothere.jpg">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
</style>

डेमो: https://jsfiddle.net/uz2gmh2k/2/

जैसा कि फ़िडल दिखाता है, टूटी हुई छवि को स्वयं नहीं हटाया जाता है, लेकिन यह संभवतः अधिकांश मामलों के लिए समस्या को हल करेगा बिना किसी जेएस के और न ही सीएसएस के बिना। यदि आपको अलग-अलग स्थानों में अलग-अलग छवियों को लागू करने की आवश्यकता है, तो बस एक वर्ग के साथ अंतर करें:.my-special-case img:before { ...

— Svend
स्रोत

3

मेरी राय में। यह बेहतर उत्तर है। यहाँ quirksmodes onerror पर लेते हैं ..... मुझे बहुत सुरक्षित लगता है। quirksmode.org/dom/events/error.html#t01

— n0nag0n

12

BTW, अगर error.jpg मौजूद नहीं है, तो यह एक अनंत लूप का कारण बनता है क्योंकि यह छवि खोजने की कोशिश करता रहता है, फिर ऑनर्र को फिर से कॉल किया जाता है, यह इसे नहीं ढूंढ सकता है, और पूरी बात फिर से शुरू होती है।

— बोर

30

अनंत लूप जोखिम से बचने के लिए, बस एक परीक्षण जोड़ें: <img src = "foo.jpg" onerror = "if (this.src! = 'Error.jog') this.src = 'error.jpg'?">

— jacquarg

21

वैकल्पिक रूप से, आप लिख सकते हैं:onerror="this.src='error.jpg';this.onerror='';"

— Denilson Sá Maia

6

इसमें jQuery कहाँ है?

— प्रवीण कुमार पुरुषोत्तम

64

स्प्रिंग इन एक्शन 3 एड में यह समाधान मिला।

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

अद्यतन: यह एक HTML केवल समाधान नहीं है ... onerrorजावास्क्रिप्ट है

— अमित बकले
स्रोत

3

यह बहुत अच्छा काम करता है। यहाँ imgur पर एक फॉलबैक इमेज के साथ एक अपडेट दिया गया है: <img src = "an-hidden-image -jpg" alt = "" onerror = "this.src = 'http: ///i.imgur.com/hfg1J8s.png' ">

— arv

15

<img style="background-image: url(image1), url(image2);"></img>

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

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

— एमिलियानो बारबोजा
स्रोत

developer.mozilla.org/en/docs/Web/CSS/…

— एमिलियानो बारबोज़ा

यह केवल तभी काम करता है जब image1 पूरी तरह से अपारदर्शी हो। यदि इसमें पारदर्शिता है, जैसे अधिकांश आइकन छवियां करते हैं, तो छवि 2 के माध्यम से दिखाई देगा।

— जद

14

<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

छवि के आयामों को दर्ज करना सुनिश्चित करें और आप छवि को टाइल करना चाहते हैं या नहीं।

— lambacck
स्रोत

28

क्या अधिकांश ब्राउज़र एक 'टूटी लिंक' छवि नहीं दिखाते हैं जब छवि नहीं मिलती है ... उस स्थिति में, पृष्ठभूमि सेट करने से समस्या हल नहीं होगी।

— जस्टिन डी।

13

मुझे नहीं लगता कि यह सिर्फ HTML का उपयोग करके संभव है। हालांकि जावास्क्रिप्ट का उपयोग करना यह योग्य होना चाहिए। मूल रूप से हम प्रत्येक छवि पर लूप करते हैं, यदि यह पूर्ण है तो परीक्षण करें और यदि यह प्राकृतिक है शून्य है तो इसका मतलब है कि यह नहीं मिला है। यहाँ कोड है:

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

इसे इस तरह उपयोग करें:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया गया

— पिम जग
स्रोत

2

यह पिम काम कर रहा है, और यह पूरी तरह से पुन: प्रयोज्य है, लेकिन मैं इस मामले के लिए हल्के विकल्प को पसंद करूंगा। बहुत बहुत धन्यवाद :) +1

— गैलीलौ

आपने मेरा सारा जीवन बचा लिया सर।

— दाढ़ी बनाने वाला

12

यदि आप कोणीय / jQuery का उपयोग कर रहे हैं तो यह मदद कर सकता है ...

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

व्याख्या

मान लिया कि जिसके itemपास संपत्ति हैurl जो अशक्त हो सकती है, जब वह तब होती है तो छवि टूटी हुई दिखाई देगी। onerrorजैसा कि ऊपर वर्णित है, विशेषता अभिव्यक्ति के निष्पादन को ट्रिगर करता है। आपको srcऊपर वर्णित विशेषता को ओवरराइड करने की आवश्यकता है , लेकिन आपको अपने altSrc तक पहुंचने के लिए jQuery की आवश्यकता होगी। वेनिला जावास्क्रिप्ट के साथ काम करने के लिए इसे नहीं मिला।

थोड़ा हैकी लग सकता है लेकिन मेरे प्रोजेक्ट के दिन बच गए।

— ओबी
स्रोत

11

एक साधारण img- तत्व बहुत लचीला नहीं है, इसलिए मैंने इसे चित्र-तत्व के साथ जोड़ा। इस तरह से किसी CSS की जरूरत नहीं है। जब कोई त्रुटि होती है, तो सभी srcset का बैकबैक संस्करण पर सेट हो जाता है। एक टूटी हुई लिंक छवि दिखाई नहीं दे रही है। यह अनावश्यक छवि संस्करणों को लोड नहीं करता है। चित्र-तत्व उन प्रकारों के लिए उत्तरदायी डिज़ाइन और एकाधिक कमियों का समर्थन करता है जो ब्राउज़र द्वारा समर्थित नहीं हैं।

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>

— bapho
स्रोत

यह एक महान है! लापता ब्राउज़र समर्थन caniuse.com/#feat=picture से अवगत रहें । यदि आपको IE11 जैसे पुराने ब्राउज़र का समर्थन करने की आवश्यकता है, तो पॉलीफ़िल या किसी अन्य समाधान का उपयोग करने पर विचार करें।

— हेनरिक

7

angular2:

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">

— user3601578
स्रोत

1

हालांकि यह काम कर सकता है मुझे नहीं लगता कि यह कोई नई जानकारी जोड़ता है। ऑनरोर भाग सिर्फ वेनिला जावास्क्रिप्ट है और src बाइंडिंग पहले से ही कोणीय उपयोगकर्ताओं द्वारा जाना जाना चाहिए

— Chic

7

कुछ अच्छे उत्तरों और टिप्पणियों से युक्त सरल और साफ समाधान।

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

यह अनंत लूप जोखिम को भी हल करता है।

मेरे लिए काम किया।

— मनीष कुमार
स्रोत

IMO, यह निश्चित रूप से सुरुचिपूर्ण नहीं दिखता है।

— स्क्रिप्ट 47

1

@ Script47 इसकी साफ-सुथरी, मैं साफ

— मनीष कुमार

1

नहीं, मैं यह भी साफ नहीं कहूँगा। यह उल्लेख करने के लिए नहीं कि यह संभवतः अन्य समाधानों का एक पुनर्वसन है।

— स्क्रिप्ट 47

एक जादू की तरह काम करता है! धन्यवाद!

— गोहाइब्रिड

1

Lifesaver। मैं सुरुचिपूर्ण नहीं चाहता था, मैं सरल और काम करना चाहता था। धन्यवाद!

— किट

7

एक HTML केवल समाधान, जहां एकमात्र आवश्यकता यह है कि आप उस छवि का आकार जानते हैं जिसे आप सम्मिलित कर रहे हैं। पारदर्शी छवियों के लिए काम नहीं करेगा, क्योंकि यह background-imageभराव के रूप में उपयोग करता है ।

हम background-imageउस छवि को लिंक करने के लिए सफलतापूर्वक उपयोग कर सकते हैं जो दी गई छवि गायब होने पर दिखाई देती है। फिर एकमात्र समस्या टूटी हुई आइकन छवि है - हम इसे एक बहुत बड़े खाली चरित्र को सम्मिलित करके निकाल सकते हैं, इस प्रकार सामग्री को प्रदर्शन के बाहर धकेल सकते हैं img।

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}

This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder

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

एक सीएसएस केवल समाधान (केवल वेबकिट)

img:before {
  content: " ";
  font-size: 1000px;
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
  margin-bottom: -16px;
}

This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder

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

— eithed
स्रोत

4

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

जैसे कि आपको ALSO में एक DEFAULT WIDTH और HEIGHT के साथ एक ऑल्ट / टेक्स्ट शामिल करना चाहिए, जैसे। यह एक शुद्ध HTML समाधान है।

alt="NO IMAGE" width="800" height="350"

तो अन्य अच्छे उत्तर को थोड़ा संशोधित किया जाएगा:

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

मेरे पास क्रोम में ऑब्जेक्ट टैग के साथ मुद्दे थे, लेकिन मुझे लगता है कि यह उस पर भी लागू होगा।

आप आगे शैली / पाठ बहुत स्टाइल हो सकता है ...

तो मेरा जवाब जावास्क्रिप्ट का उपयोग एक अच्छा alt / पाठ कमबैक के साथ है।

मुझे यह भी दिलचस्प लगा: एक छवि की उच्चतम विशेषता को कैसे स्टाइल करें

— Xofo
स्रोत

3

JQuery के साथ एक modulable संस्करण , इसे अपनी फ़ाइल के अंत में जोड़ें:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

और आपके imgटैग पर:

<img src="..." data-src-error="..." />

— केविन रॉबर्टेल
स्रोत

3

उपरोक्त समाधान अधूरा है , यह विशेषता याद आती हैsrc ।

this.srcऔर this.attribute('src')समान नहीं हैं, पहले वाले में छवि का पूरा संदर्भ है, उदाहरण के लिएhttp://my.host/error.jpg , लेकिन विशेषता सिर्फ मूल मूल्य रखती है,error.jpg

सही समाधान

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />

— SEB
स्रोत

3

इस कोड का उपयोग करते समय, मैं Uncaught TypeError: this.attribute is not a functionक्रोम 43 में देखता हूं ।

— जॉन वाशम

क्या आप jQuery का उपयोग कर रहे हैं?

— मिक्स

onError डेवलपर.

— mozilla.org/en-US/docs/Web/HTML/Element/img

2

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

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

अपने कोणीय एप्लिकेशन मॉड्यूल में एक नया फ़ॉलबैक निर्देश जोड़ें:

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])

— रॉब इवांस
स्रोत

शांत विचार! फ़ॉलबैक इमेजेज की एक सरणी एक अच्छा कार्यान्वयन है

— Z. खुल्ला

1

मुझे हाल ही में एक फॉल बैक सिस्टम का निर्माण करना पड़ा, जिसमें किसी भी प्रकार की फ़ॉलबैक छवियां शामिल थीं। यहां बताया गया है कि मैंने एक साधारण जावास्क्रिप्ट फ़ंक्शन का उपयोग कैसे किया।

एचटीएमएल

<img src="some_image.tiff"
    onerror="fallBackImg(this);"
    data-fallIndex="1"
    data-fallback1="some_image.png"
    data-fallback2="some_image.jpg">

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

function fallBackImg(elem){
    elem.onerror = null;
    let index = +elem.dataset.fallIndex;
    elem.src = elem.dataset[`fallback${index}`];
    index++;
    elem.dataset.fallbackindex = index;
}

मुझे लगता है कि यह कई कमबैक छवियों को संभालने का एक बहुत ही हल्का तरीका है।

— Rager
स्रोत

onError डेवलपर.

— mozilla.org/en-US/docs/Web/HTML/Element/img

0

Jquery का उपयोग करके आप कुछ ऐसा कर सकते हैं:

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});

— जॉन
स्रोत

0

किसी भी छवि के लिए, बस इस जावास्क्रिप्ट कोड का उपयोग करें:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

टैग टैग कहां ptImageसे <img>प्राप्त किया जाता है document.getElementById()।

— जोस एस्टेव्स परेरा
स्रोत

0

Google ने इस पृष्ठ को "इमेज फ़ॉलबैक html" कीवर्ड में फेंक दिया, लेकिन क्योंकि ऊपर के गैर ने मेरी मदद की, और मैं IE के लिए "svg फ़ॉलबैक सपोर्ट 9 से नीचे" की तलाश में था, मैं खोज करता रहा और यही मैंने पाया:

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

यह ऑफ-टॉपिक हो सकता है, लेकिन इसने मेरे अपने मुद्दे को हल कर दिया है और यह किसी और की भी मदद कर सकता है।

— सांडोर ज़ुबोली
स्रोत

0

पैट्रिक के शानदार जवाब के अलावा , उन लोगों के लिए जो एक क्रॉस-प्लेटफ़ॉर्म कोणीय js समाधान खोज रहे हैं, यहां आप जाएं:

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

यहाँ एक प्लंक है जहाँ मैं सही समाधान खोजने की कोशिश कर रहा था: http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

— Sunsay
स्रोत

0

यदि आपने डायनेमिक वेब प्रोजेक्ट बनाया है और वेबकंटेंट में आवश्यक छवि रखी है तो आप स्प्रिंग सीवीसी में नीचे दिए गए कोड का उपयोग करके छवि को एक्सेस कर सकते हैं:

<img src="Refresh.png" alt="Refresh" height="50" width="50">

आप img नाम का फ़ोल्डर भी बना सकते हैं और छवि को फ़ोल्डर img के अंदर रख सकते हैं और उस img फ़ोल्डर को WebContent में रख सकते हैं फिर आप नीचे दिए गए कोड का उपयोग करके छवि तक पहुँच सकते हैं:

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">

— योशिता महाजन
स्रोत

-2

कुंआ!! मुझे यह तरीका सुविधाजनक लगा, छवि की ऊंचाई विशेषता के लिए जाँच करें 0 होने के लिए, फिर आप डिफ़ॉल्ट छवि के साथ src विशेषता को अधिलेखित कर सकते हैं: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImorElement/ छवि

 image.setAttribute('src','../icons/<some_image>.png');
  //check the height attribute.. if image is available then by default it will 
  //be 100 else 0
  if(image.height == 0){                                       
       image.setAttribute('src','../icons/default.png');
  }

— suhail
स्रोत