Hello friends, I am developing an app in ionic 3, and I came across a problem, as much as I try, I can not display the image I shot using the camera camera in the background-image of a div, you would know to tell me where I am going wrong?
obs: I tried with DATA_URL, FILE_URI and NATIVE_URI
clickedImagePath : any = '';
photo() {
this.empty_photo = '';
this.clickedImagePath = '';
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
targetHeight: 768
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
let base64image = 'data:image/jpeg;base64,' + imageData;
this.clickedImagePath = base64image;
}, (err) => {
// Handle error
});
}
<ion-col class="d-flex justify-content-center align-items-center" [ngStyle]="{'background-image': 'url(' + clickedImagePath + ')'}" style="background-size: cover;background-position: center;background-repeat: no-repeat;">
<img class="top-image" src="{{empty_photo}}" />
<div padding class="top-container-inner">
<button ion-button icon-only clear navPop class="arrow-button">
<img src="assets/imgs/back-black.svg" />
</button>
<ion-fab bottom right class="camera" (click)="photo()">
<button color="danger" ion-fab>
<img src="assets/imgs/cam.svg" />
</button>
</ion-fab>
</div>
</ion-col>