How to display an image taken from Camera

Hi guys,
my issue is about showing a picture after taken from camera.

my code to take a picture is the follow:

 takePicture() {{
      quality: 100,
      correctOrientation: true,
      allowEdit: true,
      targetHeight: 300,
      targetWidth: 300

      (imagePath) => {

        if (!_.isEmpty(imagePath)) {
         this.navCtrl.push(PhotoPage, { "imagePath" : imagePath});

      }, (err) => {

          console.log("Error: " , err);


my PhotoPage code is in photo.ts:

import { Component } from '@angular/core';
import { IonicPage, NavParams } from 'ionic-angular';

  selector: 'page-photo',
  templateUrl: 'photo.html',

export class PhotoPage {

  private path: string; 
  private comment: string;

    private navParams: NavParams
  ) {

    this.path = this.navParams.get("imagePath");

and the template photo.html is:

<ion-content padding>

    <img src="{{ path }}"  />

  <ion-textarea placeholder="Comment" floating [(ngModel)]="comment"></ion-textarea>

Doing this, the image is not showed :frowning:

If I log the path I have for example the following:


If I use DestinationType.DATA_URL, I got a base64 image and works fine, but I am interested to the path, because I have to use the crop function once get a picture from camera.

Please help me, maybe I do a mistake but I don’t know.


You face the problem on iOS?

See chapter “Rewriting file://”

this.path = normalizeURL(this.path);

The problem is on Android, then I will use iOS.

I also used normalizeURL from ‘ionic-angular’, but the path doesn’t change and the problem is still present.

Maybe some CORS issue or width/height css not interpreted correctly on Android?

Have you try to debug with the Chrome debugger? See error in the console?

Unfortunatelly I don’t have the camera on the PC.

I tried to use again normalizeUrl function but this is the result:

path: file:///storage/emulated/0/Android/data/
normalized path : file:///storage/emulated/0/Android/data/

As you can see the result is the same.

Then I tried to replace file:// to empty string:

(this.navParams.get(“imagePath”)).replace(‘file://’, ‘’);

obtaining the follow:


This time I see the following:

Please help me :frowning:

Ok so I double checked, the file:// should only be removed on iOS not Android. Using the normalize method should take care of that

Could you try again without replacing manually file:// and publish a screenshot again?


You could try to test with a real phone and debug it while pairing it with your computer with a cable

Android how to: Debugging Ionic Applications When Deployed to an Android Device - YouTube

iOS how to: Debugging Ionic Applications When Deployed to an iOS Device - YouTube

Finally is your project an open source project?

If yes I could give a try, the problem is definitely in your project not in the libraries

I am on the real phone… I am using a real device

Then you could try to debug like in the video tutorials

If I keep the path as is: file:///storage/emulated/0/Android/data/

I don’t see nothing, a part of the label of the Comment:

Nop, is a real project.

I will try to create a blank project with only this part…

Ok I am seeing the tutorial.
I let you know!

Thanks for now

1 Like

According your last screenshot, I kind of have the feeling that there is a CSP or CSS error because there isn’t any broken image displayed anymore, like in your first screenshot

But I may be wrong

Anyway it’s good to have a look to the tutorial, even if it doesn’t help you now, may help later to know how to debug

yes, I let you know. Thanks

I see the remote devices on chrome but when I click on the inspect button


it open a page without my app… and I am not able to continue


When you select your image in the elements list, do you find your image? src is set? css width/height set?

  <img src="{{ path }}"  /> <!--this rendered element in chrome debugger elements-->

And a spontaneous idea, could you try moving the following from your constructor to ionViewDidEnter ?

this.path = this.navParams.get("imagePath");

just in case

now my problem is about : I cannot see the device button when I go in the inspect app

As you can see in the image above (2.png). I don’t have the device button like in the youtube tutorial:

Don’t know, don’t use that option when I debug

Have you try my last remark about catch the param in ionViewDidEnter instead of the constructor?

Anyway if you don’t succeed, let me know if I could access the sources or a demo repo where you could reproduce your problem. I don’t have that much time and that would be finally quicker for both of us