问题
I'm using Android at the moment and developing my app with Ionic. When a user takes a photo, I'm having it append to an ion-slide in a ion-slides element. However, I keep getting "Not allowed to load local resource error." All the permissions are set (The image gets saved)
HTML:
<ion-slide *ngFor="let looImage of looImages">
<img src="{{ looImage }}" imageViewer ion-long-press
(onPressing)="showImageOptions()"/>
</ion-slide>
TS:
options: CameraOptions = {
correctOrientation: true,
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
capturePhoto() {
this.camera.getPicture(this.options).then((imageData) => {
this.looImages.push(imageData);
console.log(this.looImages.length);
}, (err) => {
});
}
Full error:
Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1538074314258.jpg
回答1:
It's security layer in mobile which denies to load the image from web view. You can use 'DATA_URL' which will return base64 content. you can attach to src property by appending content type and applying DomSanitizer service.
If you still want to use FILE_URI, using ionic-native/file plugin https://ionicframework.com/docs/native/file/, you can move the image in to application data directory and you can access from there.
来源：https://stackoverflow.com/questions/52543422/ionic-setting-an-image-source-as-file-uri-produces-not-allowed-to-load-local