Question

从服务器获取回复。了解如何显示所有数据，但不知道如何显示图像。

"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"
        }
      ],

    },

使用ng-repeat

获取HTML

<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);



            })

通过此链接，我不知道如何显示图像。怎么显示这个图像？我需要如何使用url数组？

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

你也可以在img标签中使用ng-repeat，这是它的工作示例：

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

Answer 3

我们可以使用src属性或ng-src属性

<强> SRC

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

<强> NG-SRC

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

Answer 4

使用跟踪每个独特的东西，问题是这样的： -

    <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

这是一些例子，当body数组包含多个对象时。

   <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>

工作代码链接：click here

Answer 6

使用ng-src和track by $index（因为您有重复的网址）

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

＆＃13;

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"
    }]
  }];
});

＆＃13;

<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>

＆＃13;

从阵列AngularJS获取图像

6 个答案: