Angular img src 控制台错误答案

【问题标题】：Angular img src console errorAngular img src 控制台错误
【发布时间】：2014-11-09 21:24:53
【问题描述】：

我正在使用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)

如何解决这个错误？

【问题讨论】：

检查这个：docs.angularjs.org/api/ng/directive/ngSrc

标签： javascript angularjs

【解决方案1】：

这就是您要查找的内容：https://docs.angularjs.org/api/ng/directive/ngSrc 这是因为浏览器尝试使用您提供的src 获取图像。如果您使用ng-src，Angular 将负责等到表达式编译完成，然后将src 附加到<img> 元素。

【讨论】：

好吧，我太傻了，我忘了ng-src。我还在学习角度，所以我可以“负担”犯这些错误：D 干杯 :)
没有问题。这是一个很好的问题。现在事后看来，也许我们更新了标题以反映“src”属性，因为我们现在确信它与 ng-repeat 无关？
多哈。同样的错误在这里！忘了 abiut ng-src ...我责怪在太多语言/环境/框架之间切换！ x)

【解决方案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

【讨论】：