Question

我跟随this tutorial使用离子框架和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 = {＆＃34; FILE＆＃34;：＆＃34; path to image＆＃34;}并且存储数组的$ scope是

$ scope.images = $ state.params.dataToFotos.album;

＆＃34;专辑＆＃34;存储数组：

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”属性。他们有一个“文件”属性。他们不应该这样：

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

图像网格未加载图像（Ionic + AngularJS）

1 个答案: