图像网格不加载图像(Ionic + AngularJS)

Question

我将按照本教程使用ionic framework和angularjs在网格中加载一些图像。当我使用下面的代码时，图像会正确显示。

<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
  <ion-content padding="true" class="has-header">
    <div class="row responsive-md">
        <div class="col col-25" ng-repeat="image in images">
            <img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
        </div>
    </div>
  </ion-content>
</ion-view>

我从一个json文件中获取图像，索引名为file = {" file ":"路径到图像"}，存储数组的$作用域是

美元范围。images = $state.params.dataToFotos.album;

"album"存储数组:

Object {item: Object, album: Array[2]}
album: Array[2]
0: Object
  $$hashKey: "object:75"
  FILE: "images/Sabado - Show/flyer-templates04.jpg"
__proto__: Object
1: Object
   $$hashKey: "object:76"
   FILE: "images/Sabado - Show/images.jpg"

当我将div更新为下面的代码时，我无法加载图像并且没有显示

<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{images[$index + 3].src}}" width="100%" />
        </div>
    </div>

我怎么能修复它包括我的源数组来显示图像?我试图删除。src到我的数组，但它没有工作。

页面控制器:

.controller('fotos2Ctrl', ['$scope', '$state', function ($scope, $state) {
  $scope.$on('$ionicView.beforeEnter', function(event, viewData){
    viewData.enableBack = true;
  });
if(!$state.params.dataToFotos) {
    console.log($state.params.dataToFotos);
}else{
    console.log($state.params.dataToFotos);
    $scope.images = $state.params.dataToFotos.album; 
}
}])

Answer 1

看起来您试图将"src"属性注入img元素的src属性。

但是Album中的对象都没有"src"属性。它们有一个"FILE"属性。它们不应该是这样的吗?

<img ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" />