Hello. I’m trying to prepare image for sending to the server from gallery or camera. Started with gallery. Using cordova-plugin-camera. I’m getting an image URL like content://media/external/images/media/27494/
when I use it in img src="{{URL}}"
I get broken-link icon , or grey background in case if ion-img
<<HTML>>
<ion-content padding>
<img style="width: 200px; height: 60px;" *ngIf="lastImage" src={{lastImage}}>
<ion-img style="width: 200px; height: 60px;" *ngIf="lastImage" src={{lastImage}}></ion-img>
<img style="width: 200px; height: 60px;" *ngIf="lastImage" src="content://media/external/images/media/27494/">
<ion-img style="width: 200px; height: 60px;" *ngIf="lastImage" src="content://media/external/images/media/27494/"></ion-img>
<div style="width: 200px; height: 60px;" [style.background-image]="'url(' + lastImage + ')'"></div>
<img style="width: 200px; height: 60px;" *ngIf="lastImage" src={{lastImageNotSanitized}}>
<div style="width: 200px; height: 60px;" [style.background-image]="'url(' + lastImageNotSanitized + ')'"></div>
<ion-img style="width: 200px; height: 60px;" *ngIf="lastImage" src={{lastImageNotSanitized}}></ion-img>
<img style="width: 200px; height: 60px;" *ngIf="lastImage" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==">
<div class="">{{lastImage}}</div>
<div class="">"{{lastImage}}"</div>
<h3 *ngIf="!lastImage">Please Select Image!</h3>
</ion-content>
<<.ts>>
options: CameraOptions = {
quality: 50,
destinationType: 2,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: 0,
};
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Source',
buttons: [
{
text: 'Load from Library',
handler: () => {
this.camera.getPicture(this.options).then((imageData) => {
this.lastImage = this.sanitizer.bypassSecurityTrustUrl(imageData);
this.lastImageNotSanitized = imageData;
}, (err) => {
this.presentToast('Error.');
});
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
