angularjs - अगर एक ngSrc पथ 404 तक हल हो जाता है, तो क्या डिफ़ॉल्ट पर फ़ॉलबैक करने का कोई तरीका है?




angularjs-directive imagesource (8)

जिस एप्लिकेशन को मैं बिल्ड कर रहा हूं, उसके लिए मेरे उपयोगकर्ता को इस छवि से पहले 4 टुकड़े जानकारी सेट करने की आवश्यकता है, यहां तक ​​कि लोड होने का मौका भी है। यह छवि एप्लिकेशन का केंद्र-टुकड़ा है, इसलिए टूटी हुई छवि लिंक यह पूरी चीज की तरह दिखती है जैसे बोर्क किया गया है। मैं एक और छवि 404 पर अपनी जगह लेना चाहता हूं।

कोई विचार? मैं इसके लिए एक कस्टम निर्देश लिखने से बचना चाहता हूं।

मुझे आश्चर्य हुआ कि मुझे एक समान सवाल नहीं मिला, खासकर जब दस्तावेज़ों में पहला सवाल वही है!

http://docs.angularjs.org/api/ng.directive:ngSrc


अगर छवि 404 है या छवि खाली है, जो निर्देशों की कोई आवश्यकता नहीं है, तो आप इस तरह ng-src फ़िल्टर का उपयोग कर सकते हैं :)

<img ng-src="{{ p.image || 'img/no-image.png' }}" />

इसके लिए आपको कोणीय की आवश्यकता नहीं है, या यहां तक ​​कि सीएसएस या जेएस भी। यदि आप चाहते हैं, तो आप इसे सरल, जैसे या कुछ बनाने के लिए एक सरल निर्देश में इस उत्तर (लिंक) को लपेट सकते हैं, लेकिन यह एक बहुत ही सरल प्रक्रिया है ... बस इसे ऑब्जेक्ट टैग में लपेटें ...

केवल सीएसएस / एचटीएमएल (जेएस के बिना) का उपयोग कर छवि टूटी हुई आइकन को छिपाने के लिए कैसे


पार्टी के लिए बहुत देर हो चुकी है, हालांकि मैं एक ऐसी प्रणाली में एक ही मुद्दे के समाधान के साथ आया हूं जिसका निर्माण मैं कर रहा हूं।

मेरा विचार, हालांकि, दुनिया भर में हर छवि img टैग को संभालने के लिए था।

मैं अपने HTML को अनावश्यक निर्देशों के साथ मिर्च नहीं करना चाहता था, जैसे यहां दिखाए गए err-src वाले। अक्सर, विशेष रूप से गतिशील छवियों के साथ, आपको नहीं पता होगा कि यह बहुत देर हो चुकी है या नहीं। ऑफ-मौके पर अतिरिक्त निर्देश जोड़ना एक छवि गायब है जो मुझे लगता है।

इसके बजाय, मैं मौजूदा img टैग का विस्तार करता हूं - जो वास्तव में, कोणीय निर्देशों के बारे में है।

तो यही वह है मुझे जो मिला है।

नोट : इसके लिए पूर्ण JQuery लाइब्रेरी मौजूद होना आवश्यक है, न केवल JQlite कोणीय जहाजों के साथ, क्योंकि हम .error() उपयोग कर रहे हैं .error()

आप इसे इस Plunker पर कार्रवाई में देख सकते हैं

निर्देश इस तरह बहुत दिखता है:

app.directive('img', function () {
    return {
        restrict: 'E',        
        link: function (scope, element, attrs) {     
            // show an image-missing image
            element.error(function () {
                var w = element.width();
                var h = element.height();
                // using 20 here because it seems even a missing image will have ~18px width 
                // after this error function has been called
                if (w <= 20) { w = 100; }
                if (h <= 20) { h = 100; }
                var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=Oh No!';
                element.prop('src', url);
                element.css('border', 'double 3px #cccccc');
            });
        }
    }
});

जब कोई त्रुटि होती है (जो होगा क्योंकि छवि मौजूद नहीं है या पहुंच योग्य नहीं है आदि) हम कैप्चर और प्रतिक्रिया करते हैं। आप छवि आकार भी प्राप्त करने का प्रयास कर सकते हैं - अगर वे पहली बार छवि / शैली पर मौजूद थे। यदि नहीं, तो अपने आप को एक डिफ़ॉल्ट सेट करें।

यह उदाहरण प्लेसहोल्ड.आईट का उपयोग छवि के बजाय दिखाने के लिए कर रहा है।

अब प्रत्येक छवि, src या ng-src का उपयोग करने के बावजूद स्वयं कुछ भी लोड होने पर कवर नहीं है ...


मेरा सुझाव है कि आप अपनी समस्या को हल करने के लिए कोणीय यूआई उपयोग 'अगर कथन' निर्देश का उपयोग करना चाहें, जैसा कि http://angular-ui.github.io/ । मैंने अभी भी वही काम करने के लिए इसका इस्तेमाल किया है।

यह अनचाहे है, लेकिन आप ऐसा कुछ कर सकते हैं:

नियंत्रक कोड:

$scope.showImage = function () {
    if (value1 && value2 && value3 && value4) { 
        return true;
    } else {
        return false;
    }
};

(या सरल)

$scope.showImage = function () {
    return value1 && value2 && value3 && value4;
};

एचटीएमएल देखें: <img ui-if="showImage()" ng-src="images/{{data.value}}.jpg" />

या यहां तक ​​कि सरल, आप केवल एक स्कोप संपत्ति का उपयोग कर सकते हैं:

नियंत्रक कोड:

$scope.showImage = value1 && value2 && value3 && value4;

एचटीएमएल देखें: <img ui-if="showImage" ng-src="images/{{data.value}}.jpg" />

प्लेसहोल्डर छवि के लिए, बस एक और समान <img> टैग जोड़ें, लेकिन अपने ui-if पैरामीटर को विस्मयादिबोधक ( ! ) चिह्न के साथ प्रीपेड करें, और या तो ngSrc को प्लेसहोल्डर छवि का पथ बनाएं, या केवल सामान्य ol के अनुसार एक src टैग का उपयोग करें 'एचटीएमएल।

जैसे। <img ui-if="!showImage" src="images/placeholder.jpg" />

जाहिर है, उपरोक्त सभी कोड नमूने मान रहे हैं कि प्रत्येक मान 1, मान 2, मान 3 और मान 4 null / false बराबर होगा जब आपके प्रत्येक 4 टुकड़े अधूरे होते हैं (और इस प्रकार वे पूर्ण होने पर true बूलियन मान भी होते हैं )।

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

अद्यतन: 'ui-if' AngularUI प्रोजेक्ट से गुम है क्योंकि इसे कोर AngularJS कोड में एकीकृत किया गया है! हालांकि v1.1.x के रूप में, जिसे वर्तमान में 'अस्थिर' के रूप में चिह्नित किया गया है।


मैं इस तरह कुछ उपयोग करता हूं, लेकिन यह मानता है कि team.logo मान्य है। यह डिफ़ॉल्ट रूप से बल देता है अगर "team.logo" सेट नहीं है या खाली है।

<img ng-if="team.logo" ng-src="https://api.example.com/images/{{team.logo}}">
<img ng-hide="team.logo" ng-src="img/default.png">

यह एक छवि लोड करने में त्रुटि और src को प्रतिस्थापित करने के लिए एक बहुत ही सरल निर्देश है। (Plunker)

एचटीएमएल:

<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />

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

var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.errSrc) {
          attrs.$set('src', attrs.errSrc);
        }
      });
    }
  }
});

यदि आप ngSrc खाली होने पर त्रुटि छवि को प्रदर्शित करना चाहते हैं तो आप इसे (Plunker) जोड़ सकते हैं:

attrs.$observe('ngSrc', function(value) {
  if (!value && attrs.errSrc) {
    attrs.$set('src', attrs.errSrc);
  }
});

समस्या यह है कि यदि मान खाली है तो ngSrc src विशेषता को अद्यतन नहीं करता है।


यहां एक समाधान है जो मैं मूल जावास्क्रिप्ट का उपयोग करने के साथ आया था। मैं जांच रहा हूं कि छवि टूट गई है या फिर स्रोत को बदलने और बदलने के लिए छवि में एक वर्ग जोड़ना।

मुझे क्वारा उत्तर से मेरे जवाब का हिस्सा मिला http://www.quora.com/How-do-I-use-JavaScript-to-find-if-an-image-is-broken

app.directive('imageErrorDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element[0].onerror = function () {
                element[0].className = element[0].className + " image-error";
                element[0].src = 'http://img3.wikia.nocookie.net/__cb20140329055736/pokemon/images/c/c9/702Dedenne.png';
            };
        }
    }
});

लोडिंग त्रुटि या खाली स्रोत स्ट्रिंग के दोनों मामलों को पकड़ने के लिए जेसन समाधान का विस्तार करने के लिए, हम केवल एक घड़ी जोड़ सकते हैं।

एचटीएमएल:

<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />

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

var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {

      var watcher = scope.$watch(function() {
          return attrs['ngSrc'];
        }, function (value) {
          if (!value) {
            element.attr('src', attrs.errSrc);  
          }
      });

      element.bind('error', function() {
        element.attr('src', attrs.errSrc);
      });

      //unsubscribe on success
      element.bind('load', watcher);

    }
  }
});






imagesource