0

I am following this tutorial to load some images in a grid with ionic framework and angularjs. When I use the code below the images are displayed correctly.

<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>

I get the images from a json file with index named FILE= {"FILE":"path to image"} and the $scope storing the array is

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

"album" stores the arrays:

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"

When I update my div to the code below I am not able to load the images and nothing is displayed

<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>

How can I fix it to include my source array to display the images? I tried to remove .src to my arrays but it did not work.

Page controller:

.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; 

}

}])

1 Answer 1

1

It looks like you're trying to inject a "src" property into the src attribute of the img elements.

But none of the objects in Album have a "src" property. They have a "FILE" property. Shouldn't they look like this:

<img ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" />
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you man! I had done that before but it should have an error in another place of the code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.