Ng-src not working for locally stored image

Question

I'm trying something in angularjs. This is the controller I made:

function ImagesController($scope){
    $scope.count = 0;
    $scope.imags = [
        {
            image1: 'images/levels/level1/sky.jpg',
            image2: 'images/levels/level1/rain.jpg',
            image3: 'images/levels/level1/sky.jpg'
        },
        {
            image1: 'images/levels/level2/x.jpg',
            image2: 'images/levels/level2/y.jpg',
            image3: 'images/levels/level2/z.jpg'
        }
    ];
  }

And this is the HTML linking to this controller:

<div ng-controller="ImagesController">
      Random Writing
        <img ng-src="$scope.imags[0].image1">
 </div>

I don't know why the image that I'm trying to display is not working. I have added ng-app to the tag already so that can't be the issue.

should be ng-src="imags[0].image1" – Michael Kang Jul 21 '14 at 05:30 — Michael Kang, Jul 21 '14 at 05:30
@user3757732 take a look at my answer – Nidhish Krishnan Jul 21 '14 at 05:56 — Nidhish Krishnan, Jul 21 '14 at 05:56

score 6 · Accepted Answer · answered Jul 21 '14 at 05:37

6

I belive you should write

   <img ng-src="{{imags[0].image1}}>

Link to the directives documentation

answered Jul 21 '14 at 05:37

Gustav

3,408
4
24
41

1

Thanks! I changed a couple of things and added the {{}}. Now, the image is loading! – Nakul Pathak Jul 21 '14 at 06:15

Ng-src not working for locally stored image

1 Answers1

Linked