角度js指令中的ng-repeat在瀏覽器控制檯中產生404

Question

我有一個非常簡單的角度js指令，它使用ng-repeat遍歷集合並簡單地生成包含圖像的有序列表。該指令的工作原理，但我注意到在瀏覽器（鉻）一個額外的控制檯錯誤。

codepen http://codepen.io/OmarCreativeDev/pen/OXjQJw?editors=1010

控制檯錯誤 GET http://placehold.it/%7B%7Bi%7D%7D00x100.jpg 404（未找到）

解碼控制檯錯誤http://placehold.it/ {{I}} 00x100.jpg

Answer 1

什麼如果你嘗試過使用「ng-src」取代模板上的src？

angular.module('MyApp', []).directive('customDirective', function() { 
    'use strict'; 
    return { 
     restrict: 'E', 
     template: '<ul>'+ 
         '<li ng-repeat="i in collection">'+ 
          '<img ng-src="http://placehold.it/{{i}}00x100.jpg" />'+ 
         '</li>'+ 
        '</ul>', 
     scope: { 
      imageCount: '@' 
     }, 
     link: function ($scope, element, attr) { 
      $scope.collection = []; 

      for(var i = 1; i < $scope.imageCount; i++){ 
       console.log(i); 
       $scope.collection.push(i); 
      } 
     } 
    }; 
}); 

Answer 2

試NG-SRC到位SRC

Use of ng-src vs src ngSrc

'<img ng-src="http://placehold.it/{{i}}00x100.jpg" />'+