Ionic - Setting an image source as FILE_URI produces: Not allowed to load local resource error

Question

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

Answer 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.