0

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

JPanda
  • 319
  • 3
  • 12

1 Answers1

0

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.

Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
  • Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg – JPanda Oct 02 '18 at 18:44