angular js 指令中的 ng-repeat 在浏览器控制台中生成 404

Question

我有一个非常简单的 angular js 指令，它使用 ng-repeat 循环遍历一个集合，并简单地生成一个包含图像的有序列表。该指令有效，但我注意到浏览器中出现额外的控制台错误 (chrome)。

<div ng-app="MyApp">
  <custom-directive image-count="4"></custom-directive>
</div>

angular.module('MyApp', []).directive('customDirective', function() {
    'use strict';
    return {
        restrict: 'E',
        template:   '<ul>'+
                        '<li ng-repeat="i in collection">'+
                            '<img 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);
            }
        }
    };
});

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" />'+

angular js 指令中的 ng-repeat 在浏览器控制台中生成 404

ng-repeat in angular js directive produces 404 in browser console

angularjs

angularjs-directive

angular-directive