2016-09-15 2 views
0

이온 프레임 워크와 각도계가있는 그리드에서 일부 이미지를로드하려면 this tutorial을 따르고 있습니다. 아래 코드를 사용하면 이미지가 올바르게 표시됩니다.이미지 그리드가 이미지를로드하지 않음 (Ionic + 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> 

I 인덱스라는 FILE = { "FILE": "이미지 경로"}와 JSON 파일로부터 이미지를 얻을 어레이 기억 $ 범위는

$ scope.images =이고 $ state.params.dataToFotos.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 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> 

어떻게 이미지를 표시하기 위해 원본 배열을 포함하도록 수정 했습니까? 내 배열. srcrc 제거하려고했지만 작동하지 않았다.

페이지 컨트롤러 : 당신은 IMG 요소의 src 속성에 "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; 

} 

}]) 

답변

1

것 같습니다.

그러나 앨범의 모든 개체에는 "src"속성이 없습니다. 그들은 "FILE"속성을 가지고 있습니다. 다음과 같이 표시하면 안됩니다.

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

고맙습니다. 이전에 해봤지만 코드의 다른 곳에 오류가 있어야합니다. –

관련 문제