Image not loading using AngularJS ng-repeat and ng-src directive

Question

So basically when I was using native html5 i was using five <img src=""> tags to load five images. When i wanted to use AngularJS i thought of iterating a div five times through ng-repeat and using ng-src="" get the image whose source path is stored in an array in the controller. But some how im always getting this error GET file:///home/sanad/Desktop/drag/x.source net::ERR_FILE_NOT_FOUND

This is my html:

<div ng-repeat="x in img">{{x.source}}
    <img ng-id="x.id" ng-src="x.source" >
</div>

This is my js:

var app=angular.module('d2d',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {id:'table',source:'images/table.jpg'},
        {id:'paper',source:'images/paper.jpg'},
        {id:'computer',source:'images/computer.jpg'},
        {id:'ac',source:'images/ac.jpg'},
        {id:'sofa',source:'images/sofa.jpg'}
    ];
});

you might want to set the image with css instead using an image. Angularjs have security policies that might disable ng-src on images inside ng-repeat: <div data-ng-repeat="i in images"><div style="background:url(imgs/{{i.srcimg}})"></div></div> — Sombriks
– Sombriks, Commented Jun 26, 2015 at 2:35

Deblaton Jean-Philippe · Accepted Answer · 2015-08-26 14:42:34Z

9

 <div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

I'm not sure about what ng-src does so I did not suggested it in first place.

I also have the feeling that using a directive for doing something that html does well is not a good approach. In fact, it instantiates new scopes, new watches,...

Edit:

Using src="{{param}}" instead of ng-src="{{param}}" could lead the browser to make a call to the url http:\\yourServer\{{param}}, which would be invalid. ng-src has been created to solve that problem.

edited Aug 26, 2015 at 14:42

answered Dec 29, 2014 at 10:15

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

2 Comments

augustoccesar Over a year ago

According to the AngularJS API, this is a "buggy way to do it". The correct is to use mixing your answer with the question. <img ng-src="{{x.source}}"/>. Ref: Angular API

Patrick Over a year ago

FYI ng-src does not create a new scope or a new watch. A watch is added by virtue of the interpolation ({{}}) in both cases. There is no extra watch from one solution to the other. Also, both solutions do not create additional scope.

Aleksa · Accepted Answer · 2016-02-22 14:36:02Z

3

You can do this too

<img ng-repeat="x in img" src="{{x}}">

it works properly

edited Feb 22, 2016 at 14:36

answered Feb 22, 2016 at 14:21

Aleksa

335 bronze badges

Comments

dam1 · Accepted Answer · 2016-11-22 13:26:50Z

0

<img ng-repeat="x in img" ng-src="{{x.source}}">

If you have just an array of images

<img ng-repeat="img in images track by $index" ng-src="{{img}}">

answered Nov 22, 2016 at 13:26

dam1

3,7103 gold badges24 silver badges18 bronze badges

Collectives™ on Stack Overflow

Image not loading using AngularJS ng-repeat and ng-src directive

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related