@minareth wrote:
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(); }
Posts: 1
Participants: 1