Image not displaying in img src in Ionic? - ionic-framework

Question

I am able to click photos in my phone but image not displaying on my page.
I have installed the plugins from official ionic framework doc:
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save #ionic-native/camera
This is my code:
getPic()
{
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.myPhoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
});
}
I have declared myPhoto:any; inside my class.
This is where I am showing my Image:
<ion-content no-bounce padding>
<button ion-button (click)="getPic()">Take A Picture</button>
<p align="center"><img src="{{ myPhoto }}"></p>
</ion-content>
I don't know where I am doing the mistake. Please Help me. Thanks!

Answer 1

private OpenCamera(): void{
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType: this.camera.PictureSourceType.CAMERA,
saveToPhotoAlbum: true
}
this.camera.getPicture(options).then((imageData) => {
this.AddIssueObj.file.push(s);
this.uploadcount=this.AddIssueObj.file.length;
}, (err) => {
// Handle error
});
}
for HTML:
<ion-scroll scrollX="true" class="m-slider__scroll" scroll-avatar>
<span *ngFor="let v of photoList">
<img src="{{v}}" alt="slider image1" class="m-slider__img" />
</span>
</ion-scroll>