javascript - ng-repeat with image 没有显示？

Question

我在 cloudinary 中存储了图标。在这里，我使用 ng-repeat 列出了所有工作找到的商店，但没有显示图标我已经附上了我的 html 和 Controller 代码。我有这样的图标 http://res.cloudinary.com/ *******/icon1.png, http://res.cloudinary.com/icon2.png,http://res.cloudinary.com/icon3.png

angular.module('test', [])
  .controller('TestController', ['$scope','$filter','$http',
      function($scope, $filter,$http) {
        
         $http.get('****').success(function(data, dealers, response) {
           
           $scope.dealers = data;
           console.log(data.icons);
           
           });
      
  }]);
//console i am getting icons like this
"http://res.cloudinary.com/*******/icon1.png,http://res.cloudinary.com/icon2.png,http://res.cloudinary.com/icon3.png"

<div class="list card"  data-ng-repeat="dealer in dealers | filter:query ">
 <img ng-src="{{dealer.icons}}" ></img> 
</div>

Answer 1

您提到:

//console i am getting icons like this    "http://res.cloudinary.com/*******/icon1.png,http://res.cloudinary.com/icon2.png,http://res.cloudinary.com/icon3.png"

它是一个字符串。而且你不能迭代一个字符串。您需要将其转换为数组，然后对其进行迭代。

使用 split(",") 将字符串转换为数组。 Learn more here

改变这一行:

$scope.dealers = data;

收件人:

$scope.dealers = data.icons.split(",");

旁注:

Img 是一个自闭合标签。更正为:

<img src="" />