कोणीय JS ng-src

Question

का उपयोग कर फ़ॉलबैक (डिफ़ॉल्ट) छवि मैं एक मोडल से लौटाए गए डेटा का उपयोग करके एक छवि स्रोत सेट करने का प्रयास कर रहा हूं। यह एक एनजी-दोहराने पाश अंदर है:

<div id="divNetworkGrid"> 
    <div id="{{network.id}}" ng-repeat="network in networks"> 
     <span> 
      <table> 
       <tr> 
        <td class="imgContainer"> 
         <img ng-src="{{ ('assets/img/networkicons/'+ network.actual + '.png') || 
             'assets/img/networkicons/default.png' }}"/> 
        </td> 
       </tr> 
      </table> 
     </span> 
    </div> 
</div> 

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

मुझे यकीन है कि यह कुछ वाक्यविन्यास मुद्दा है, लेकिन यह पता नहीं लगा कि क्या गलत है।

Answer 1

ng-src का उपयोग करने का दिलचस्प तरीका। मैं परीक्षण किया है नहीं कैसे कि अभिव्यक्ति हैंडल किया जाएगा लेकिन मैं इसे एक अधिक स्थिर तरीका कर रही सुझाव है:

<img ng-src="{{ networkIcon }}" /> 

और अपने नियंत्रक में:

$scope.networkIcon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png'; 

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

संपादित करें:

angular.forEach($scope.networks, function(network) { 
    network.icon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png'; 
}); 

<tr ng-repeat="network in networks"> 
    <td><img ng-src="{{ network.icon }}" /></td> 
</tr> 

Answer 2

angular.module('fallback',[]).directive('fallbackSrc', function() { 
    return{ 
     link: function postLink(scope, element, attrs) { 
      element.bind('error', function() { 
       angular.element(this).attr("src", attrs.fallbackSrc); 
      }); 
     } 
    } 
}); 

<img ng-src="{{url}}" fallback-src="default-image.jpg"/> 

angular.module('fallback', []).directive('actualSrc', function() { 
    return{ 
     link: function postLink(scope, element, attrs) { 
      attrs.$observe('actualSrc', function(newVal, oldVal){ 
       if(newVal != undefined){ 
        var img = new Image(); 
        img.src = attrs.actualSrc; 
        angular.element(img).bind('load', function() { 
         element.attr("src", attrs.actualSrc); 
        }); 
       } 
      }); 

     } 
    } 
}); 

<img actual-src="{{url}}" ng-src="default.jpg"/> 

link

Answer 3

<div id="divNetworkGrid"> 
       <div id="{{network.id}}" ng-repeat="network in networks"> 
        <span> 
         <table> 
          <tr> 
           <td class="imgContainer"> 
            <img ng-src="{{'assets/img/networkicons/'+(network.actual || 'default')+'.png'}}"/> 
           </td> 
          </tr> 
         </table> 
        </span> 
       </div> 
      </div> 

इनलाइन या यदि पूछे चर अपरिभाषित है काम करेंगे। ऊपर अपनी समस्या

Answer 4

ठीक कर देंगे मैं सिर्फ बाहर पाया है, कि आप एक img टैग पर ng-src और src दोनों का उपयोग कर सकते हैं और यदि ng-src विफल रहता है (चर प्रयुक्त आदि मौजूद नहीं है), यह स्वतः ही src विशेषता पर वापस आने जाएगा।

Answer 5

मुझे क्या लगता है कि यह हो रहा है कि स्रोत 404 लौटा रहा है भले ही network.actual शून्य हो। उदाहरण के लिए, पहले मूल्य:

('assets/img/networkicons/'+network.actual+'.png')

404 src यूआरएल के लिए मूल्यांकन कर रही है, जैसे कुछ ('संपत्ति/img/networkicons/अशक्त .png')। - http://codepen.io/jpost-vlocity/pen/zqqerL

Answer 6

<img ng-src="{{('assets/img/networkicons/'+network.actual+'.png')}}" onerror="this.src='assets/img/networkicons/default.png'" /> 

CodePen उपयोग के मामलों डेमो के लिए: तो या चयन में, यह सच-y है, लेकिन संसाधन 404. है उस मामले में, आप की तरह कुछ के साथ onError के माध्यम से वापस आने सेट कर सकते हैं आप या उसके बाद ऑपरेटर के बाद वैकल्पिक छवि की आपूर्ति कर सकते हैं:

{{ book.images.url || 'Images/default.gif' }}