处理ng-repeat中的图像

时间:2016-12-26 12:24:42

标签: angularjs json angularjs-ng-repeat

我有一个带图像源的数组。我需要在ng-repeat中显示这些图像。我无法获得需要帮助。

var images = ["http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":252}}}",
"http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":97}}}",
 "http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":411}}}"]

html:

<div ng-repeat = "image in images">
 {{image}}
</div>

1 个答案:

答案 0 :(得分:3)

您应该使用<img ng-src="{{image}}" />并使用单引号将图片网址换行(因为您的网址中有双引号)。

var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
 $scope.images = ['http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":171}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":252}}}',
'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":97}}}',
 'http://35.154/media?request={"request":{"service":{"servicetype":"6","functiontype":"1013","session_id":966},"data":{"mediaids":411}}}'];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="image in images">
    <img ng-src="{{image}}" />
  </div>
</div>