修改你的JSON

Question

我的数据来自我的数据库。每条记录都有一个图像路径。我正在尝试使用路径显示图像，但图像不会显示。

这是我的控制器：

angular.module('myModule').controller('ContractorCtrl', function ($scope, $interval, $window) {

    $scope.items = [
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/red_cross.png"

    ];

});

这是我的HTML：

＆LT;

div ng-app="myModule" ng-controller="ContractorCtrl">
<div class="newWidget">
            <ul class="grid-wrap one-whole">
                <li ng-repeat="item in items" class="grid-col one-quarter">
                    <div>
                        <img ng-src="~/Images/{{item}}" />
                    </div>
                </li>
            </ul>

        </div>
    </div>

我尝试使用“src”和“ng-src”，但都不起作用。关于我在这里缺少什么的想法？

非常感谢任何帮助！

Answer 1

修改你的JSON

 $scope.items = [
  {url: "ContractorWidget/yellow_triangle.png"},
  {url: "ContractorWidget/yellow_triangle.png"},
  {url: "ContractorWidget/yellow_triangle.png"},
  {url: "ContractorWidget/yellow_triangle.png"}
];

然后在html中

<li ng-repeat="item in items" class="grid-col one-quarter">
      <div>
           <img ng-src="~/Images/{{item.url}}" />
      </div>
</li>

Answer 2

您的ng-repeat数组不起作用，因为您有重复的项目。

使用track by $index：

<li ng-repeat="item in items track by $index" class="grid-col one-quarter">
    <img ng-src="~/Images/{{item}}" />
</li>

修改json是解决问题的一种方法，因为数组中的对象具有不同的引用，即使值是相同的。

角度 - 图像不会显示

2 个答案:

修改你的JSON