Angular嘗試將模板表達式作爲圖像加載

我使用NG-REPEAT遍歷元素列表，並基於迭代的對象中的字符串加載縮略圖圖像。Angular嘗試將模板表達式作爲圖像加載

這工作正常，但好奇的是，在控制檯中我得到的錯誤，名爲{{thumbnail}}圖像找不到。因此，除了爲我的元素提取正確的圖片外，它似乎也嘗試將Angular表達式本身加載爲圖片網址。

這種行爲的原因是什麼？

<body> 

    <div class="main" ng-app="twitterBox" ng-controller="TwitterBoxController"> 

     <div class="tweet" ng-repeat="tweet in tweets"> 
      <div class="tweetHeader"> 
       <img class="thumbnail" src="{{tweet.thumbnail}}"></img> 
       <span class="name">{{tweet.name}}</span><br> 
       <span class="handle">{{tweet.handle}}</span><br> 
       12 minutes ago 
      </div> 

      {{tweet.text}} 
     </div> 


    </div> 

    <script src="js/angular.min.js"></script> 
    <script> 
     var myApp = angular.module('twitterBox',[]); 

     myApp.controller('TwitterBoxController', ['$scope', function($scope) { 
      $scope.tweets = [ 
      { name: "Bobby Brown", handle: "@Bobby_Brown44", thumbnail: "images/face.jpg", text: "Hello hello hello! Hello!" }, 
      { name: "John D. White", handle: "@JohnWhite", thumbnail: "images/face.jpg", text: "Bla bla bla bla!" } 
      ]; 
     }]); 

    </script> 
</body>

來源

2015-10-19 zxz

我們展示代碼，請 –

您應該使用ngSrc來顯示其路徑是使用AngularJS代碼生成的圖像。

當您使用常規src標記時，瀏覽器將嘗試加載名爲{{thumbnail}}的資源，因爲它不知道AngularJS是什麼。它看到的只是一個指向{{thumbnail}}的圖像。

來源

2015-10-19 10:48:43

使用ng-src並確保您的路徑是在你的控制器是正確的，如果你的圖片路徑是不正確的，它會給回錯誤控制檯上

<img class="thumbnail" ng-src="{{tweet.thumbnail}}"></img>

來源

2015-10-19 10:50:23

Angular嘗試將模板表達式作爲圖像加載

回答

相關問題