user3086325 user3086325 - 4 months ago 37
AngularJS Question

ng-src is not working correctly

I am building a mobile app using Ionic Framework 1 & AngularJS

I have REST service returning JSON data. The data is a photo album which consists of a name and an array of images in the album. I would like to use nested ng-repeat to display the albums and their photos in a view.

My system info:

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 1.2.4
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID: LinuxMint Description: Linux Mint 17.1 Rebecca
Node Version: v0.12.2


View

<!-- ng-repeat photo albums -->
<div ng-repeat="album in albums" id="event-images">
<div class="item item-divider">
<i class="ion-images"></i>
{{ album.albumName }}
</div>

<a class="item item-list-detail">
<ion-scroll direction="x">
<img ng-repeat="image in album.images" ng-src="{{image.img-id}}" ng-click="showImages($index)" class="image-list-thumb">
</ion-scroll>
</a>
</div>


JSON

[

{
"albumName": "Business School 2016",

"images": [{
"img-id": 1,
"img-src": "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"
},

{
"img-id": 2,
"img-src": "http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg"
},

{
"img-id": 3,
"img-src": "http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg"
},

{
"img-id": 4,
"img-src": "http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg"
}
]
},

{
"albumName": "Summer School 2016",

"images": [{
"img-id": 1,
"img-src": "http://nehandaradio.com/wp-content/uploads/2016/07/Evan-Mawarire-outside-Harare-Magistrates-Court.jpg"
},

{
"img-id": 2,
"img-src": "http://resources0.news.com.au/images/2015/03/31/1227286/010588-3399e81e-d282-11e4-a5b4-b2d65ac8975a.jpg"
},

{
"img-id": 3,
"img-src": "http://nehandaradio.com/wp-content/uploads/2016/07/riot-police-at-mawarire-court-hearing.jpg"
},

{
"img-id": 4,
"img-src": "http://placehold.it/300x300"
}
]
}


]

Result upon running

So ng-repeat is correctly iterating over the 2 albums & 4 images in each but the images are not displaying, upon inspecting elements, ng-src="0"

So ng-repeat is correctly iterating over the 2 albums & 4 images in each but the images are not displaying, upon inspecting elements, ng-src="0". What's going on & how do I fix this?

Answer

I think it should be ng-src="{{image['img-src']}}" not ng-src="{{image.img-id}}" in your img tag.

You were passing wrong property and you also need to use bracket notation because of the hyphen in the property name.