Displaying an specific image for each item in ng-repeat - angularjs

Question

I have an ng-repeat which shows a list of sports and next to every sport name I'd like to display an specific image. I'd like to know how to go about displaying the correct png for every sport. How could I make it know what image to display? Here's how the code looks like.
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<ion-list class="list">
<div class="item">
<img src="" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</ion-list>
</div>

Answer 1

I am supposing you want the image based on a key (like sport name). You can maintain a javascript object in your controller with key as name and value can be url of the image
obj = {football:'myurl'}
and use this object as
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sportsFilter = ( sports | sportsFiltered:query )">
<ion-list show-delete="sport.showStars"
class="list">
<div class="item">
<img ng-src="{{obj[sport.name]}}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>

Answer 2

You should use ng-src instead of src, so that you can pass the variable into it representing the current image to display, without risking an error 404 while the angular expression isn't parsed yet:
<img ng-src="{{sport.image}}" />
In JS part, you would merely have in your controller a kind of:
$scope.sport = {image: "http://myServer.com/mySuperSportImage.jpg"};
Note that this example doesn't deal with collections to simplify.
This ensures the binding.

Answer 3

You should create an object property for the image:
// HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<div class="item">
<img width="30" height="30" src="{{ sport.im }}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</div>
</div>
// JS
angular.module('myApp',[])
.controller('MyCtrl', function($scope) {
$scope.sport = {
leagues: ['premier', 'championship'],
checked: true
};
$scope.sports = [
{
name: 'soccer',
im: 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'
},
{
name: 'basketball',
im: 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png'
}
];
});
See this fiddle:
http://jsfiddle.net/uxu21n4v/1/

Answer 4

<img ng-src="http://www.gravatar.com/avatar/{{sport.imageLocation}}" class="sport-image"/>
Ref: https://docs.angularjs.org/api/ng/directive/ngSrc