Picture from camera is not displayed in view


I’m playing the first time with the ionic native camera.


  1. The user opens an modal-window (ionic-modal-component). (works!)
  2. Then he clicks on the button to take the picture. (works!)
  3. Preview picture should be displayed (not working!)

The image is not displayed after setting the base64-string to the src-attribute.


  • picture-creator.ts
    const options: CameraOptions = {
      quality: 25,
      targetHeight: 500,
      targetWidth: 500,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    this.camera.getPicture(options).then((imageData) => {
    }, (err) => {
      this.errorMessage = JSON.stringify(err);
  • modal-page.ts
  onArticlePictureCreated(base64String: string){
    this.previewImage = 'data:image/jpeg;base64,' + base64String;
  • modal-page.html
<ion-img [src]="previewImage"></ion-img>


  • I’m testing my mobile app currently with the Ionic DevApp. Maybe it’s a problem of DevApp to display the image?

Every hint is welcome. I guess I did almost everything and I’m running out of ideas.

Regards from Zurich

1 Like

There’s a tutorial from Paul Holiday on Udemy about Ionic’s native features… he shows you how to display picture taken from an ionic native camera to html. That’s all I know about it.

Hi @jamesharvey

I already had a look at this course at Udemy:

But there was just a simple ‘hello world’ example, which of course works :wink:
And I did already everything and more.

But I have to mention, that I only tested my mobile app until now with the Ionic DevApp.
I never tested it on a real device.

I will test it soon on a real device, to see, whether the problem is only on the DevApp side.

Hi, that’s not the tutorial I’m talking about.
This one shows you exactly how to build native camera:

he shows how to display picture taken to HTML page too.
Check Camera section of this course!
I built a camera based on this course and it works just fine on my smartphone…

I checked out the video that you mentioned, but it did not show anything new.
I did everything already what was shown in the video.

The only difference what I saw was, that the instructor coded that camera implementation with async/await
feature. But I think this is not relevant.

So my problem is still unsolved :-/


Finally I got the solution.

I can’t believe it that it took so long time to see it.
The problem was somewhere totally on an other place.

The problem was:

  1. the base64String parameter was always ‘undefined’
 onArticlePictureCreated(base64String: string){
    this.previewImage = 'data:image/jpeg;base64,' + base64String;
  1. This happenend, because I did not pass the $event param within the html view
<picture-creator (onPictureCreated)="onPictureCreated($event)"></picture-creator>


I think I worked to long with React :smile:

I still learn Angular.

But it happens so easy to mix different Framework-Syntax at this time… :rage:

but thanks to everyone, who had a look on it.


1 Like