Angular img src控制台错误

Question

我正在使用ng-repeat打印所需文件夹中的所有图像，这些图像都在<a>因为我使用的是fancyBox 。

这是控制器的一个例子：

var ParentCtrl = function ($scope) {
    $scope.getTimes=function(n){ // for the ng-repeat
        return new Array(n);
    }; 
};

app.controller('projectController', ['$scope','$injector', function($scope, $injector) {
    $injector.invoke(ParentCtrl, this, {$scope: $scope});

    $scope.title = 'project';
    $scope.image_url = 'img/project/';
    $scope.image_num = 14; //image count -> [0.jpg, 1.jpg, 2.jpg, ..., 13.jpg]
}]);

和模板：

<a href="" class="fancybox" rel="project-gallery"
    data-ng-repeat="t in getTimes(image_num) track by $index" 
    data-ng-href="{{image_url+($index)+'.jpg'}}">
        <img src="{{image_url+($index)+'.jpg'}}">
</a>

这段代码工作正常，它显示了所有14个图像。 但是，我在控制台中收到此错误：

GET http://localhost/projects/project-name/%7B%7Bimage_url+($index)+'.jpg'%7D%7D 404 (Not Found)

如何解决这个错误？

Answer 1

这就是你要找的： https ： //docs.angularjs.org/api/ng/directive/ngSrc这是因为浏览器试图用你提供的src获取图像。 如果使用ng-src ，angular将在编译表达式之前等待，然后将src附加到<img>元素。

Answer 2

在您的模板中，请使用data-ng-src而不是src 。 您的新模板将成为

<a href="" class="fancybox" rel="project-gallery"
    data-ng-repeat="t in getTimes(image_num) track by $index" 
    data-ng-href="{{image_url+($index)+'.jpg'}}">
        <img data-ng-src="{{image_url+($index)+'.jpg'}}">
</a>

看到

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