CODEWITHSUNDEEP
javascriptangularjsmean-stack
Godshand
Godshand

Reputation: 631

Using img ng-src to display array of image not working

I read some solutions for using ng-src when displaying an array of image, but it seems to be not working. Only 1 item in array accepts to be displayed. Any solution for this? I tried img [src] too but non of it is working.

Here is what I tried

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
 
    $scope.register = {
      regData: {
        branch: {},
      },
      names: [{
        name:"narquois",
        image:[
        "https://picsum.photos/200",
        "https://picsum.photos/200/300/?random"]
        
        },
        {
        name:"velvet",
        image:[
        "https://picsum.photos/200"]
        
        }],
    };

  }]);
img{
width:70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
    <thead>
       <tr align="center">
         <th>Name</th>
         <th>Image</th>
       </tr>
    </thead>			
    <tbody>
       <tr ng-repeat="person in register.names">
         <td align="center">{{ person.name }}</td>
         <td align="center"><img ng-src="{{ person.image }}"></td>
       </tr>
    </tbody>
</table> 
</div>

Upvotes: 0

Views: 459

Answers (1)

manonthemat
manonthemat

Reputation: 6251

You're currently not looping over the different images.

Try replacing your ng-repeat with this to see if that's the desired effect you were going after.

       <tr ng-repeat="person in register.names track by $index">
         <td align="center">{{ person.name }}</td>
         <td align="center">
           <img ng-repeat="image in person.image" ng-src="{{image}}" />
         </td>
       </tr>

Upvotes: 2

Related Questions