javascript - Ionic: Why isn't my HTTP.GET not loading my image? -
i'm trying load images json file ionic application create gallery isn't working. i'm trying follow guide https://blog.nraboy.com/2015/03/make-a-gallery-like-image-grid-using-ionic-framework/ use http.get request instead.
html:
<ion-content ng-controller="photoctrl" ng-init="getimages()"> <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="{{data.images[$index].src}}" width="100%" /> </div> <div class="col col-25" ng-if="$index + 1 < images.length"> <img ng-src="{{data.images[$index + 1].src}}" width="100%" /> </div> <div class="col col-25" ng-if="$index + 2 < images.length"> <img ng-src="{{data.images[$index + 2].src}}" width="100%" /> </div> <div class="col col-25" ng-if="$index + 3 < images.length"> <img ng-src="{{data.images[$index + 3].src}" width="100%" /> </div> </div>
javascript:
.controller("photoctrl", function($scope, $http) { $scope.images = []; $scope.getimages = function() { $http.get('http://myjson.com/3lkge') .success(function(data) { $scope.images = data.images; }) } });
ah,
it's because of link passing request.
the link: 'http://myjson.com/3lkge' - website, not direct json data.
correct json url request: 'https://api.myjson.com/bins/3lkge'
code should this:
$scope.getimages = function() { $http.get('https://api.myjson.com/bins/3lkge') .success(function(data) { $scope.images = data.images; }) }
tested in codepen , works.
Comments
Post a Comment