Can we show clicked images via camera api on Page If I choose destinationType: this.camera.DestinationType.FILE_URI,

Ionic Framework ionic-v3
1

Hiii guys, I tried to show images array to user which are clicked by his camera but my images are not visible on page if I choose
FILE_URI as destination type.

.ts

capImg() {
const options: CameraOptions = {
quality: 1,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum:true,
targetHeight:10,
targetWidth:5,
}

this.camera.getPicture(options).then((imageData) => {
let base64Image = imageData;
  this.imageArray.push(base64Image);
}, (err) => {
});

}
}

.html

<button ion-button (click)=‘capImg()’></button>

<div *ngIf=‘imageArray.length>0’>

<div *ngFor=‘let pic of imageArray; let i = index’>

<ion-card>

<img [src]=“pic”/>

</ion-card>

</div>

</div>

2

It looks like you are binding the image to pic and not to your array.

You could use an *ngFor to iterate through your array and that should show the images.

3

<button ion-button (click)=‘capImg()’></button>

<div *ngIf=‘imageArray.length>0’>

<div *ngFor=‘let pic of imageArray; let i = index’>

<ion-card>

<img [src]=“pic”/>

</ion-card>

</div>

</div>

4

Is what your markup looked like before your post or after I mentioned using *ngFor?