Unable to display image using FILE_URI


#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


#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:


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


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