Virtual scroll list with images doesn't work

[IonicZb]

Hello,
For a while i’ve been struggling to solve a problem: passing images to Virtual Scroll LIST.
Using documentation from VirtualScroll - Ionic API Documentation - Ionic Framework i created my absolute path vector to be passed to virtualScroll property.
If i try with a normal list in works just fine.
But if i switch and use Virtual Scroll it only shows parts of the images. Althought, in these case, if i scroll down long enought and then scroll up the images will show correct.
What should i do to properly load the images from the start using Virtual Scroll list?

Here is my exemple: http://rezervatii-naturale.ro/ionic/images/
1.Step1- DATA IMPORT button (is ok)
2.Step2 - DATA VIEW - normal (everything works fine)
3.Step3 - DATA VIEW - VIRTUAL SCROLL (it breaks)

my .ts file

import {Component} from "@angular/core";
import {NavController} from 'ionic-angular';
import {Http} from '@angular/http';
 
@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    v_img_info: any=[];          
    varDataView: number=0;   

    constructor(private nav: NavController, private http: Http ) {
    }
   
   
    loading_data(){
        this.v_img_info=[];
        this.http.get("https://www.net-vision.ro/webservice/photomaniacs_get.php?operatiune=album&idalbum=8")
        .subscribe(data ={
            for (var i = 0; i < data.json().v_cale_poze.length; i++) {
                let item = {
                    imgURL: data.json().v_cale_poze[i],
                    no: i
                }
     
                this.v_img_info.push(item);
            }
            alert("DATA OK!");
     
        }, error ={
            console.log(JSON.stringify(error.json()));
        });
    }
   
    view_images(i:number){
        this.varDataView=i;
    }
}

my template html:

<ion-navbar *navbar>
    <ion-title>
      Images
    </ion-title>
</ion-navbar>
<ion-content class="home" padding>
<button (click)="loading_data()">Step1: Data import</button>

<button (click)="view_images(1)">Step2: Data view - Normal</button>
<button (click)="view_images(2)">Step3: Data view - VIRTUAL SCROLL</button>


  <div *ngIf="varDataView==1" >
      <h3>Normal List</h3>
      <ion-list >
          <ion-item *ngFor="let element of v_img_info">
               <img src='{{element.imgURL}}'>
               <p>Number: {{element.no}} <br /></p>
          </ion-item>
      </ion-list>
  </div>

  <div *ngIf="varDataView==2">
      <h3>virtual scroll</h3>
      <ion-list [virtualScroll]="v_img_info" >
          <ion-item *virtualItem="let element" >
          <ion-img [src]="element.imgURL" ></ion-img>
          <p>Number: {{element.no}} <br /></p>
          </ion-item>
      </ion-list>
  </div> 
  </ion-content>

For my project i used:
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
OS: Windows 7 SP1
Node Version: v6.2.0

Thanks in advance!

[ghenry22]

Try just using a regular img [src]= instead of ion-img. Does it work then? I have similar issues with ion-img so have just taken it out for now as its a bit too much of a work in progress. It will be very useful for efficient lazy loading when it’s ready though.

[IonicZb]

Thank you for the idea. I’ve already tried that but didn’t change the result.

[LAFONT]

Hi,

Did you try with approxItemHeight ?

[IonicZb]

Hi. Yes, i tried but no improvement. Thanks for the suggestion.

[umeshionic1234]

hello all , am making one project in ionic in which task is taking picture through camera or choose image from list of images (in horizontal scroll bar list ) and send it to server …so here am facing one problem is how can i show on page that choose image from list…solution to choose image from list please
thanks in advance …you can see my below link for excepted output…I want such output any solution please ?