Lỗi điều khiển góc img src góc

Question

Tôi đang sử dụng ng-repeat để in tất cả hình ảnh từ thư mục mong muốn và những hình ảnh đó ở <a> vì tôi đang sử dụng fancyBox.

Dưới đây là một ví dụ về điều khiển:

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] 
}]); 

Và mẫu:

<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> 

Và mã này hoạt động tốt, nó cho thấy tất cả 14 hình ảnh. Tuy nhiên, tôi gặp phải lỗi này trong bảng điều khiển:

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

Cách khắc phục lỗi đó?

Answer 1

Đây là những gì bạn đang tìm kiếm: https://docs.angularjs.org/api/ng/directive/ngSrc Đó là do trình duyệt cố gắng tìm nạp hình ảnh với src mà bạn đã cung cấp. Nếu bạn sử dụng ng-src, góc sẽ đảm bảo chờ cho đến khi cụm từ được biên dịch và sau đó nối thêm src vào phần tử <img>.

Answer 2

Trong mẫu của bạn, vui lòng sử dụng data-ng-src thay vì src. Mẫu mới của bạn sẽ trở thành

<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> 

Xem

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