unable to display image from FILE URI, Ionic framework

ionic file
ionic display local image
ionic file upload
ionic profile picture upload
how to add image in ionic 4
ionic camera file_uri
ionic display image from url
ionic 4 camera example

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.

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

unable to display image from FILE URI, Ionic framework, I used the file plugin and its method readAsDataURL. It worked fine for me. Hope it'll helps people out there :) const options: CameraOptions  I’m using latest Ionic and FirebaseX (cordova-plugin-firebasex). I’m able to successfully send OTP to the entered mobile number. But for some reason, after sending the OTP i’m not…

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"/>

ionic-image-loader, Ionic Component and Service to load images in a background thread Uses HttpClient from Angular 4+ , and cordova-plugin-file via ionic-native wrappers. Fallback image url to load in case the original image fails to load, N/A display, string, Sets the display CSS property of the <img-loader> element. Therefore, we will create a simple media popover using ionic modal overlay and the ionic slide box to slide through images. I will just load some local files as it’s a bit annoying to always take a photo/video first to see how it works, but you could just change the URLs I use for local files to your URLs to your captured media files.

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

How To Save An Image To A Specific Path In Ionic 3 Using Native , How To Save An Image To A Specific Path In Ionic 3 Using Native Ionic is a popular, open source, and cross-platform mobile app framework that is helpful in Once we've installed Node.js, we are able to install other tools on the Now, we have already installed camera plugin and file so we need to  I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog. Here is

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"/> 

Cannot display image captured from camera via file_uri from , display an image taken by the camera on an external web page. However, I am able to use the file uri to upload the image using the Default is FILE_URI. DATA_URL : 0, Return image as base64-encoded string (DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible), FILE_URI : 1, Return image file URI, NATIVE_URI : 2 Return image native URI (e.g., assets-library:// on iOS or content:// on Android) (optional)

Cordova and Ionic Native, We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile At the end of this course you will be able to (a) Build mobile applications The file URI will save the image in a temporary storage on your device, and set up is a, Card in which we will display the image that we obtain from the camera. Unable display image from file path in android 5.0 when i use Lens Blur take photo and then to load this picture use Picasso.Other version works well.Only version 5.0 i use Camera or Panorama will worked well This‘s my code File imageFil

FILE_URI path for Camera not working on IONIC 4, ionic native file path FILE_URI , the resulting URL will not work to display the image. This will not work on Ionic 4 (or at least I could not make it work). the problem was due to a bug in Ionic Framework that prevents images from being  Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards Need help upgrading to Ionic Framework 4.0?

Not allowed to load local resource · Issue #183 · zyra/ionic-image , Hi: I using: Ionic: 4.0.3 Ionic Framework: ionic-angular 3.9.2 Ionic image When using Ionic on Android, the file URI is never transformed for Ionic and thus I might be able to create a pull request later today, if you would be  The aim is to display the users Name, last name, date of birth and image using 3 different tables, and then change them if the user wants. All the data are displayed fine and able to change as well. But cant display image..!! Have tried to 'echo' the image in line 22 for testing and then in line 45 where is should display.

Comments
  • try with this link ionicframework.com/docs/3.3.0/api/util/normalizeURL
  • Give a try to the MediaCapture plugin which also works fine.
  • its not working when take image from gallery, only in android, in iOS its working fine, has anyone have solution for this?
  • readAsDataURL method converting image file url to base64 img. so why not use direct base64 string from plugin (destinationType: this.camera.DestinationType.DATA_URI)
  • Thanks for answering but i tried your solution by installing APK on android 8.1.0 but it was unsuccessful :(
  • I am getting not error, If i console this.myPhoto i get the file path, but the image i get in view is broken.
  • if you set destinationType: this.camera.DestinationType.DATA_URL you should get a base64 encoded string.
  • 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
  • Thanks for answering but i tried your solution by installing APK on android 8.1.0 but it was unsuccessful :(
  • It might be permission related issue. Can you please check app-permissions in settings.
  • Storage permission is checked.