Displaying a FILE_URI image taken by Native Camera in Ionic 3

Question

How do you display a FILE_URI image taken by the user using @ionic-native/camera in Ionic 3?

I can use Ionic Native's Camera to get a FILE_URI image URL, with a result like this:

file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg

However, When I try to display this image back to the user by referring to the URI in my view template, the image never loads.

Things I've tried:

-Using the image URI directly in the view

<img src="{{profile.image}}">    // Never loads

-Sanitizing the URI by including DomSanitizer in the page component:

<img [src]="domSanitizer.bypassSecurityTrustUrl(profile.image)">    // Never loads

I would rather not use a base64 image because of the performance drag. What am I doing wrong here?

score 3 · Accepted Answer · edited Mar 19 '19 at 04:01

import { normalizeURL } from 'ionic-angular'; ionic3 <img> tag src

<img *ngIf="base64Image" src="{{base64Image}}"/> 

 openCamera(pictureSourceType: any) {
  let options: CameraOptions = {
   quality: 95,
   destinationType: this.camera.DestinationType.FILE_URI,
   sourceType: pictureSourceType,
   encodingType: this.camera.EncodingType.PNG,
   targetWidth: 400,
   targetHeight: 400,
   saveToPhotoAlbum: true,
   correctOrientation: true
 };
 this.camera.getPicture(options).then(imageData => {
  if (this.platform.is('ios')) {
      this.base64Image = normalizeURL(imageData);
      // Alternatively if the problem only occurs in ios and normalizeURL 
      // doesn't work for you then you can also use:
      // this.base64Image= imageData.replace(/^file:\/\//, '');
  }
  else {
      this.base64Image= "data:image/jpeg;base64," + imageData;
  }
 }, error => {
     console.log('ERROR -> ' + JSON.stringify(error));
   });
 }

You SAVE MY DAY, MAAAN! Thanks a lot for this answer, I couldn't figure out how to fix that... Thanks!!! — Gozus19, May 28 '18 at 19:51

score 0 · Answer 2 · answered Mar 25 '18 at 19:50

Hi try to use File Path ionic plugin

path = "file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg";
this.filePath.resolveNativePath(path)
   .then(filePath => console.log(filePath))
   .catch(err => console.log(err));

Please read the documentation https://ionicframework.com/docs/native/file-path/

score -1 · Answer 3 · answered Oct 13 '18 at 08:56

You can use the below code for display the image

savePhotoClick = () =>{

const options: CameraOptions = {
  quality: 70,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64 (DATA_URL):
  this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});

Then use the img tag for display

 <img [src]="base64Image" *ngIf="base64Image" />

Displaying a FILE_URI image taken by Native Camera in Ionic 3

3 Answers3

Linked