ionic3 - Ionic image picker plugin, showing image not working

Question

Im trying to use the image picker for Ionic to select multiple images and show them in an . But I've tried different things and I can't get it to work, I get the image picker and I'm able to select images but I can't get it to show, not in an image tag and not in a slider.

TS function:

addImages() {
  let options = {
  maximumImagesCount: 10,
  outputType: 1
};
this.imagePicker.getPictures(options).then((results) => {
  for (var i = 0; i < results.length; i++) {
    console.log('Image URI: ' + results[i]);
    console.log("Image URI base64? " + results[i])
    this.imagePaths.push(results[i]);
  }
}, (err) => { console.log("Coulden't get picture") },
);

}

HTML:

<ion-slides class="imageSlider"  pager>
        <ion-slide [(ngModel)]="imagePaths" *ngFor="let imagePath of imagePaths | async, let i = index">
                <img class="img_card" src="{{ imagePath }}" />
        </ion-slide>
            <ion-slide (click)="addImages()">
                    <ion-icon name="add"></ion-icon>
                    <p>Voeg foto's toe van uw woning</p>
                </ion-slide>
    </ion-slides>

I tried some other things but nothing seems to work, I also tried to navigate to a different page after selecting the image because I thought that maybe there was something wrong with 2 way binding, but that also didn't work.

PS: I'm not getting any errors, the image just isn't added to the slider.

Does anybody have any idea what I'm doing wrong?

Thanks in advance.

标签： ionic3cordova-plugins

Answer 1

Stupid mistake, but after 2 days and trying different things I realised that I copy/pasted the ngFor from another page and still had the | async part in there.

That's why the images weren't showing up.

But it works now.