Angular Ошибка img src console

Я использую 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)

Как исправить эту ошибку?

Ответ 1

Это то, что вы ищете: https://docs.angularjs.org/api/ng/directive/ngSrc Это потому, что браузер пытается получить изображение с помощью src, который вы предоставили. Если вы используете ng-src, angular будет следить за ожиданием, пока выражение не будет скомпилировано, а затем добавьте src в элемент <img>.

Ответ 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