离子：为什么我的图像没有从我的 json 文件中加载？答案

【问题标题】：Ionic: Why are my images not loading from my json file?离子：为什么我的图像没有从我的 json 文件中加载？
【发布时间】：2015-07-17 00:53:26
【问题描述】：

我正在尝试将我的 json 文件中的图像加载到我的应用程序中，但我无法让它工作：

这是我的代码：

js:

.controller('photoCtrl', function($scope, $ionicModal, $ionicBackdrop, $ionicScrollDelegate, $ionicSlideBoxDelegate, $http) {
   $scope.images = [];

    $scope.getImages = function() {
        $http.get('https://api.myjson.com/bins/37ia6')
            .success(function(data) {
                $scope.images = data.images;
            })
    }

html:

<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" >

  <ion-content ng-init="getImages()" class="center" class="has-header padding">

    <!-- start Under6/7/8/9s Photos -->
    <div class="item item-divider">
      <i class="ion-images"></i> Under6/7/8/9s Photos
    </div>
    <a class="item item-list-detail">
      <ion-scroll direction="x">
        <img on-hold="onHold()" ng-repeat="image in images" ng-src="{{images.src}}" ng-click="showImages($index)" class="image-list-thumb" />
      </ion-scroll>
    </a>
</ion-content>
</ion-view>

【问题讨论】：

我看到前 3 张图片正在加载。也许值得创建一个最小的示例，您可以从 JSON 文件中加载图像，而无需任何花哨的东西。也许 JSON 有问题，但可能不是真正的 JSON 文件有问题，而是其他部分。
天啊，我加错了密码笔！ codepen.io/beefman/pen/QbBdVw
@smither123 你有一个错字：ng-src="{{ image.src }}"。

标签： javascript json ionic photos

【解决方案1】：

我认为原因在于您的 JSON。迭代时你期望发生什么：

{"images":"http://cdn.caughtoffside.com/wp-content/uploads/2012/07/Marko-Marin.jpg"}

您的 API 可能应该返回一个对象数组，例如

[{"src":"http://cdn.caughtoffside.com/.../Marko-Marin.jpg"},
 {"src":"http://cdn.caughtoffside.com/.../Johnny-Blue.jpg"},
 ...
]

迭代一个对象通常看起来不同：

<div ng-repeat="(key, value) in myObj">

【讨论】：

【解决方案2】：

试试这个：

<ion-scroll direction="x" ng-repeat="image in images"> 
  <img on-hold="onHold()" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb" /> 
</ion-scroll>

【讨论】：

@smither123 你确定images 正在返回有效数据吗？你能打开一个检查器调试器，看看代码是否生成了正确的 HTML 吗？
我用类似的 json 文件创建了一个新的 codepen。希望这会有所帮助。 codepen.io/beefman/pen/QbBdVw