Unable to display image using FILE_URI

Ionic Framework ionic-v3
1

hi there, I am using camera plugin to display image , if destinationType is DATA_URL it works fine

.ts: 

    getPic(){
     const options: CameraOptions = {
	   quality: 100,
	   sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
	   destinationType: this.camera.DestinationType.FILE_URI
      }

     this.camera.getPicture(options).then((imageData) => {
	 this.success = 'getting image is successful';
	 this.Image = imageData;
     }, (err) => {
	  this.err = err;
    });
   }

.html

 <button ion-button primary (click)="getPic()">get picture</button>
 <br/>
  <img src="{{Image}}" />
   <p>{{success}}</p>
   <p>{{err}}</p>

What am I doing wrong??
I am using FILE_URI so that i can upload it

1 Like
2

Did you manage to find out?

3

hi, yes… A weird solution as matter of fact.

import DomSanitizer

 import { DomSanitizer } from '@angular/platform-browser';
 /////
  constructor(private DomSanitizer: DomSanitizer){}
 //////
 uploadImage(){
  this.camera.getPicture({
  quality: 100,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  destinationType: this.camera.DestinationType.FILE_URI

  }).then((imageData) => {
     this.selectedImage = imageData;    /// passing it to variable to be used in html side

   }, (err) => {
      console.log(err);
  });
}

and in html side:

<img [src]="DomSanitizer.bypassSecurityTrustUrl(selectedImage)"/>

Voila… the image is displayed :slight_smile:

1 Like
4

<img [src]="DomSanitizer.bypassSecurityTrustUrl(capturedPhoto)" *ngIf="capturedPhoto" />

I used the above, but still the image is not shown. This is the final HTML I end up with (I inspected it with developer tools in chrome):

<img src="file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1506748631577.jpg">

Which shows nothing. Why?

6

Perhaps you need to add an encoding type to your camera options?

encodingType: this.camera.EncodingType.JPEG(or PNG)
7

I’ve got that already:

takePhoto() {
  const options: CameraOptions = {
    quality: 100,
    targetWidth: 600, 
    sourceType: this.camera.PictureSourceType.CAMERA,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options).then((imageData) => {
    this.capturedPhoto = imageData;
  }, (err) => {
    console.log("error occured!");
  });
}
8

I’ve always used data_url so I don’t have the knowledge to provide. But I do see you provide a target width and not a target height. Maybe that’s causing some unforeseen issue.

Also, though unsure if this advice is contrary to best practices, I have always bypassed explicitly typing my options as CameraOptions. As in,

let options = {
sourceType: this.camera.etc..
}
this.camera.getPicture(options).then...
9

Ok I figured it out, the problem was due to a bug in Ionic Framework that prevents images from being loaded when using the -lc switch. I used ionic cordova run adroid without -lc and the image was shown.

7 Likes
10

Glad to hear it meysamm

11

I cannot display image even I have used Domsanitizer

12

I am using ionic cordova run android --c and if I remove --c it works but the urls that I am calling from the server do not. However when I run with --c images from server are shown but not from the mobile storage. Did you find any solution other then removing your debugging tools?

13

HI, I have a question.
I creating an image, and then moving it to the device store in a folder called saved_images.
That part is working correctly, but then in the this.camera.getPicture
i getting the correct url, and I already tried domsanitizer, normalizeUrl and even cut off the file: section from the beginning, but keep getting the Not allowed to load local resource: error: file:///storage/emulated/0/Android/data/io.ionic.starter/files/saved_images/1533891361209.png
I also saw, that there is a problems with the -l and -c flags.
but I’m running the app with this script
ionic cordova run android.
even if I building it the errors remain.
What else could be the error?

14

i am facing the same issue but the above solution is not working for me . Is there any other solution

15

Hi,
I’ve the same problem

The documentation of WKWebview explain the correct way to format FILE_URI.
I don’t use “normalizeURL”, but method “replace”
You can see also “https://beta.ionicframework.com/docs/building/webview/”

With these solution you can solve the error but you can’t see the image.

1 Like
16

i solved it by doing as

1 Like
17

Fantastic!
Thanks it’s a solution.
Regards

18

Great glad to hear that it helps someone.

19

This FileReader solution is working, but there is two problems.

  1. It’s really slow
  2. It’s using the base64encoded image.
    Actually this is the reason why is it slow, because it’s hard to load the image.
    I can’t beleive that there is no working solution for this.
    And by the way, I’m using Galaxy S9 +
20

Hi folks!,
if above answers don’t work for you, try this. hope it helps.

const options: CameraOptions = {
quality: 100,
allowEdit: true,
sourceType: source,
saveToPhotoAlbum: true,
correctOrientation: true,
encodingType: this.camera.EncodingType.JPEG,
destinationType: this.camera.DestinationType.FILE_URI
}

this.camera.getPicture(options).then((imageData) => {
    //needs to import file plugin
    //split the file and the path from FILE_URI result
    let filename = imageData.substring(imageData.lastIndexOf('/')+1);
    let path =  imageData.substring(0,imageData.lastIndexOf('/')+1);
         //then use the method reasDataURL  btw. var_picture is ur image variable
         this.file.readAsDataURL(path, filename).then(res=> var_picture = res  );

})

link for file plugin:
https://ionicframework.com/docs/native/file/

14 Likes
21

HI, Thanks worked for me