Get image from array AngularJS

Question

Get a response from server. Understand how to display all data, but haven't idea, how to show images.

"body": [
    {
      "id": 18,
      "student_id": 2,
      "content": [
        {
          "feedback_id": 18,
          "user_id": "127",
          "user_name": "zhangsi",
          "user_avatar": "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/avatar/hylaa_584915ecdb608.jpg",
          "message": "sdfdsfsd",
          "image_urls": [
            "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg",
            "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg",
            "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg",
            "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg"
          ],
          "time": "2016-12-08 14:41:19"
        }
      ],

    },

Get HTML with ng-repeat

<div class="feedback-container">
    <div ng-repeat="feedback in datasfeed | filter:keyword.classname | filter:{'course_id': showprofile}:true " >

        <div  ng-repeat="content in feedback.content" class="feedback-row gt-clear group group-content" >
        <div class="gt-left">
            <div class="ava-round-small"><img src="{{content.user_avatar}}"></div>
        </div>
        <div class="gt-left right-side-fcontent ">
            <div class="students-name"> {{content.user_name}}</div>
            <div class="text-feedback">{{content.message}}</div>
            <div  class="feedback-img">
                {{content.image_urls}}
                <img src="#" width="100" height="100">
            </div>

        </div>

        </div>
    </div>

</div>

JS

httpService.getService(url, data).then(function(res) {

                                $scope.datasfeed = res.body;

                console.log($scope.datasfeed);



            })

Don't understand, how I can show images, with this link. How show this images? How I need work with url array ?

Answer 1

USE ng-src:

<div  class="feedback-img" ng-repeat="image in body[0].content[0].image_urls">
    <img ng-src="{{image}}" width="100" height="100">
 </div>

DEMO: http://jsfiddle.net/ADukg/8775/

Answer 2

You could use ng-repeat inside the img tag also, and it's working example:

<img  ng-repeat="img in content" height="35" width="35" ng-src="{{img.image_urls}}" alt="">

Answer 3

we can use either src attribute or ng-src attribute

src

<img src="{{content.image_urls}}" width="100" height="100">

ng-src

<img ng-src="content.image_urls" width="100" height="100">

Answer 4

use track by every thing unique thats y the problem try like this:-

    <div  class="feedback-img"ng-repeat="img in content.image_urls track by $index">
    <img ng-src="{{image}}" width="100" height="100">
 </div>

Answer 5

Here is some example, when body array contains more than one object.

   <div ng-repeat="alldetails in body">
    <div ng-repeat="info in alldetails.content">
        <div ng-repeat="img in info.image_urls track by $index">
            <img ng-src="{{img}}" alt="Description" />
        </div>
    </div>
  </div>

Working code link : click here

Answer 6

Use ng-src and track by $index(because you have duplicate urls)

<div class="feedback-img" ng-repeat="image in content.image_urls track by $index">
      <img src="{{image}}" width="100" height="100">
    </div>

var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
  $scope.feedback = [{
    "id": 18,
    "student_id": 2,
    "content": [{
      "feedback_id": 18,
      "user_id": "127",
      "user_name": "zhangsi",
      "user_avatar": "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/avatar/hylaa_584915ecdb608.jpg",
      "message": "sdfdsfsd",
      "image_urls": [
        "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg",
        "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg",
        "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg",
        "http://hylaa-oss.oss-cn-shanghai.aliyuncs.com/icon/hylaa_583d2b9b8e280.jpeg"
      ],
      "time": "2016-12-08 14:41:19"
    }]
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="feedback-container" ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="contents in feedback">

    <div ng-repeat="content in contents.content" class="feedback-row gt-clear group group-content">
      <div class="gt-left">
        <div class="ava-round-small">
          <img src="{{content.user_avatar}}">
        </div>
      </div>
      <div class="gt-left right-side-fcontent ">
        <div class="students-name">{{content.user_name}}</div>
        <div class="text-feedback">{{content.message}}</div>
        <div class="feedback-img" ng-repeat="image in content.image_urls track by $index">
          <img src="{{image}}" width="100" height="100">
        </div>

      </div>

    </div>
  </div>

</div>