unable to display image from FILE URI, Ionic framework

Question

I am trying to display image taken from camera and displaying it to the view. I have searched for this answer on many websites but nothing worked. I have tried DomSanitizer, Base64 and even photo-library but the image returned from them is not displayed.

My home.ts file is

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  myPhoto:any;
  image;
  constructor(public navCtrl: NavController, private camera: Camera, public DomSanitizer: DomSanitizer) {

  }

  takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      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.myPhoto = 'data:image/jpeg;base64,' + imageData;
     this.image = imageData;
     console.log(this.myPhoto);
     alert(this.myPhoto);
    }, (err) => {
     // Handle error
    });
  }
}

Here is my home.html code

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="takePhoto()" >Take Photo</button>

  <!-- <img src="{{myPhoto}}"/> -->
  <!-- <img src="{{image}}"/> -->
  <!-- <img [src]="DomSanitizer.bypassSecurityTrustUrl(myPhoto)"/> -->
  <!-- <img data-ng-src="{{myPhoto}}"/> -->
  <img src="data:image/jpeg;base64,file:///storage/sdcard0/Android/data/io.ionic.starter/cache/1533211220154.jpg"/>
</ion-content>

The commented code here is that i have tried but not succeeded.

try with this link https://ionicframework.com/docs/3.3.0/api/util/normalizeURL/ — keval nayak, Aug 06 '18 at 11:49
Give a try to the **MediaCapture** plugin which also works fine. — fiza khan, Aug 31 '18 at 06:16

score 2 · Answer 1 · edited Sep 09 '19 at 16:25

I used the file plugin and its method readAsDataURL. It worked fine for me. Hope it'll helps people out there :)

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

this.camera.getPicture(options).then((imageData) => {

    //imageData will hold the full file path so we need to extract filename and path using file plugin 
     var filename = imageData.substring(imageData.lastIndexOf('/')+1);
     var path =  imageData.substring(0,imageData.lastIndexOf('/')+1);
    //then use it in the readAsDataURL method of cordova file plugin
    //this.file is declared in constructor file :File
         this.file.readAsDataURL(path, filename).then(res=>{
           item.pic = res;
         });
}, (err) => {
 alert(err);
});

link for ionic cordova file plugin

its not working when take image from gallery, only in android, in iOS its working fine, has anyone have solution for this? — Kaushik Makwana, May 03 '19 at 09:56
readAsDataURL method converting image file url to base64 img. so why not use direct base64 string from plugin (destinationType: this.camera.DestinationType.DATA_URI) — Khurshid Ansari, Sep 09 '19 at 10:36

score 2 · Answer 2 · answered Sep 09 '19 at 17:36

2

Finally i got solution :

In component :

takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imgFileUri) => {
     this.myImg = (<any>window).Ionic.WebView.convertFileSrc(imgFileUri);
    }, (err) => {
     console.log(err);
    });
  }

In html :

<img [src]="myImg" />

Note : cordova-plugin-ionic-webview >= 4

answered Sep 09 '19 at 17:36

Khurshid Ansari

3,258
2
24
42

thanks worked in ionic 3 app. – Dinesh Gurjar Jan 07 '21 at 12:01
No luck for me :(. No idea why this isn't working. I've spent 2 days on this now – Jeremy Thomas Jan 26 '21 at 22:13
did you try in ionic 3 ? – Khurshid Ansari Jan 27 '21 at 04:42

score 0 · Answer 3 · answered Aug 06 '18 at 15:43

0

Use this function in your ts file

takePhoto(){
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 320,
      targetWidth: 320,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.CAMERA,
      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.myPhoto = 'data:image/jpeg;base64,' + imageData;
      this.image = imageData;
      console.log(this.myPhoto);
    }, (err) => {
      // Handle error
    });
  }

Use this in your html

<img [src]="myPhoto"/>

answered Aug 06 '18 at 15:43

Sabyasachi Patra

588
3
10

Thanks for answering but i tried your solution by installing APK on android 8.1.0 but it was unsuccessful :( – Muhammad Faizan Aug 08 '18 at 06:49
I am getting not error, If i console this.myPhoto i get the file path, but the image i get in view is broken. – Muhammad Faizan Aug 09 '18 at 06:34
if you set `destinationType: this.camera.DestinationType.DATA_URL` you should get a base64 encoded string. – Sabyasachi Patra Aug 09 '18 at 06:56
i have tried to show image in view by trying: * with and without Base64 string * with data_url and file_url * storage permission is checked I am getting the path of the file, i checked it on the storage but still unable to show it in view. Just for insight My ionic version is 4.0.5 NPM version: 6.1.0 node -v 10.7.0 cordova -v 8.0.0 – Muhammad Faizan Aug 09 '18 at 07:43

Mangesh Daundkar · Answer 4 · 2018-08-06T12:36:21.357

-1

Modify your home.ts in following way,

  private openGallery(): void {
    let cameraOptions = {
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 100,
      targetWidth: 1000,
      targetHeight: 1000,
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true
    }

    this.camera.getPicture(cameraOptions)
      .then(file_uri => this.imageSrc = file_uri,
      err => console.log(err));
  }

In your html file,

<img [src]="imageSrc"/>

edited Aug 06 '18 at 12:36

answered Aug 06 '18 at 11:55

Mangesh Daundkar

875
6
16

Thanks for answering but i tried your solution by installing APK on android 8.1.0 but it was unsuccessful :( – Muhammad Faizan Aug 08 '18 at 06:48
It might be permission related issue. Can you please check app-permissions in settings. – Mangesh Daundkar Aug 08 '18 at 06:50
Storage permission is checked. – Muhammad Faizan Aug 08 '18 at 07:46

unable to display image from FILE URI, Ionic framework

4 Answers4