Angular img src console error

Question

I'm using ng-repeat to print all the images from desired folder, and those images are in <a> because I'm using fancyBox.

Here's an example of controller:

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

And the template:

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

And this code works fine, it shows all the 14 images. However, I'm getting this error in the console:

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

How to fix that error?

check this: docs.angularjs.org/api/ng/directive/ngSrc

Sebastian Piu
– Sebastian Piu

2014-11-09 21:28:23 +00:00
Commented Nov 9, 2014 at 21:28 — Sebastian Piu
– Sebastian Piu, Commented Nov 9, 2014 at 21:28

Kuba Jagoda · Accepted Answer · 2014-11-09 21:28:53Z

21

This is what you are looking for: https://docs.angularjs.org/api/ng/directive/ngSrc It's because browser tries to fetch the image withsrc you provided. If you use ng-src, angular will take care of waiting until the expression is compiled, and then append src to the <img> element.

answered Nov 9, 2014 at 21:28

Kuba Jagoda

5,6172 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vucko Over a year ago

Well, that was stupid of me, I forgot about ng-src. I'm still learning angular so I can "afford" to make those errors :D Cheers :)

Kolban Over a year ago

No probs. It was a good question. On hind-sight now, maybe we update the title to reflect the "src" attribute since we now have a good belief that it wasn't ng-repeat related?

Dave Over a year ago

Doh. Same mistake here! Forgot abiut ng-src ... I blame switching between too many languages/environments/frameworks!! x)

Kolban · Accepted Answer · 2014-11-09 21:29:02Z

6

In your template, please use data-ng-src as opposed to src. Your new template will become

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

See

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

answered Nov 9, 2014 at 21:29

Kolban

15.4k3 gold badges45 silver badges71 bronze badges

Collectives™ on Stack Overflow

Angular img src console error

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related