Using Camera Native, picture isn't displayed

There is my code, when I take a picture, I click on OK but nothing happens…

I tried with [src]=… & src=… but also with {{ base64Image }} on both.
I tried with FILE_URI & DATA_URL and it changes nothing

Thanks in advance for your time & help ! :blush:

import { Component} from '@angular/core';
import { Camera } from 'ionic-native';

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

    export class Profile {
      constructor() {
      public base64Image: string;

            destinationType: Camera.DestinationType.FILE_URI,
            targetWidth: 1000,
            targetHeight: 1000
        }).then((imageData) => {
          // imageData is a base64 encoded string
            this.base64Image = "data:image/jpeg;base64," + imageData;
        }, (err) => {


destinationType: Camera.DestinationType.DATA_URL

and jpg (instead of jpeg)

this.base64Image = "data:image/jpg;base64," + imageData;

That works for me.


Thanks for the answer, but it doesn’t work for me :confused:, my ion-card-content are still blank…
It looks like it doesn’t know where to find the picture display it. Another question, when you take the picture, where is it temporarily kept ?

And if you remove the *ngIf from your view?

My HTML looks like this

<div class="avatar-wrapper">
  <img [src]="userAvatar" alt="Avatar" class="avatar">

Looks better but this is not the expected result :no_mouth:
There is the screenshot :

Hi ,
I have the same problem. This problem occur in iOS only. App runs fine Android.
I found workaround solution like this:

In .ts file

    let options = {
      destinationType: Camera.DestinationType.DATA_URL,
      targetWidth: 500,
      targetHeight: 500,
      quality: 100,
      allowEdit: true,
      correctOrientation: false,
      saveToPhotoAlbum: true,
      // mediaType: 0
      this.base64Image = "data:image/jpeg;base64," + imageData;

      let cameraImageSelector = document.getElementById('camera-image');
      cameraImageSelector.setAttribute('src', this.base64Image);


In .html file:

<ion-content padding>
      <img id="camera-image" />
      <ion-fab bottom right>
        <button ion-fab color="secondary" (click)="takePicture()"><ion-icon name="camera"></ion-icon></button>

Here is my code in github:


Nevermind, I misread your post…

Okay well, working now thanks a lot !
I’ll put : saveToPhotoAlbum: false because I want to put a filter on the picture before saving it :wink:

You saved me mate :+1:

and just saying that I’m not on iOS but on android 5.0

1 Like

Thanks for your contributing! I resolved my problem with ios…

it works for me in android :slight_smile:

1 Like

muchas gracias por la respuesta!!!