角度-图片不会显示

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：

<

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是解决问题的一种方法，因为数组中的对象具有不同的引用，即使值相同。