87116

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

Answer1:

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 <a href="https://ionicframework.com/docs/native/file/" rel="nofollow">https://ionicframework.com/docs/native/file/</a>, you can move the image in to application data directory and you can access from there.

Recommend

  • Printing Flickr API Response to Console AngularJS
  • How to show md-error message for dynamic form array?
  • Angular 2 hide and show element using *ngIf with boolean
  • Angular 4 Typescript - Construct Array of Dates of subsequent 7 Days
  • Pipes Angular 2: Sort Array of Objects
  • How can we set the url of the img element to print the view with the images.Below is my code
  • Current selected value in angular6 material mat-selection-list
  • Trying to filter data in *ngFor directive
  • MatSort and MatPaginator does not work without setTimeOut
  • ionic3 multiple swiper sliders on samepage
  • Typescript Convert Object to Array - because *ngFor does not supports iteration of object
  • How to get the ordered index after changing values in an array in angular?
  • Nested Model - Angular 2
  • Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native Vide
  • Angular 5 Form validation and display error in generic component
  • Angular *ngFor Array of Objects returning [ERROR: Cannot find a differ supporting object]
  • Cannot find a differ supporting object '[object Object]'
  • Array of methods not working ionic 2
  • Editing a Form in Angular
  • Angular 2 Reactive Forms: Cannot find control with path
  • Alert in Meteor Angular 2 app only appears after click in browser
  • Set default option in md-select in angular material 2
  • Importing angular component to be available in all modules
  • how to get selected value of radio in reactive form
  • Angular2 simple Http service Injection
  • Understanding Angular2 change event
  • md-autocomplete onSelectionChange fired twice
  • Simple Angular 2 app gives “Potentially unhandled rejection” error
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • Visual studio 2015 keystroke with mouse button
  • What does the TypeScript “lib” option really do?
  • php script is parsing content from RTE (tt_news) but internal links are not appearing as speaking ur
  • CERN ROOT exporting data to plain text
  • Trying to get the char code of ENTER key
  • Content-Length header not returned from Pylons response
  • Play WS (2.2.1): post/put large request
  • How to access EntityManager inside Entity class in EJB3
  • Why value captured by reference in lambda is broken? [duplicate]
  • vba code to select only visible cells in specific column except heading
  • ExecuteAsync RestSharp to allow backgroundWorker CancellationPending c#