Asynchronous passing image from camera to next page

I have used Ionic’s Camera plugin to take a picture. I wanted the picture to render on a second page, so I push the captured image to another page. The problem is, the push is called first in a split second before I take the picture, so the second page shows nothing the first time I take a picture. The 2nd time I take a picture, the first image I took is then rendered on the second page. The 2nd page just keeps showing the previous image I took, so I think it’s because the push is being called while my takePhoto() function is being called. How would I go about fixing this?

In my home.html
<button ion-button (click)="go2SecondPage()">Camera</button>

In my home.ts I have one function to take the photo and another to push the Image to the second page right after I take the photo.


  const options: CameraOptions = {
  	quality: 100,
  } => {
  	this.myphoto = 'data:image/jpeg;base64,' + imageData;
  (err) =>


  this.navCtrl.push(SecondPage, {data: this.myphoto} );

In my secondPage.ts

export class SecondPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  	this.loadimage = this.navParams.get('data');

  ionViewDidLoad() {
    console.log('ionViewDidLoad SecondPage');


and I call this in my secondPage.html
<p align="center"><img src="{{ loadimage }}"></p>

It might look that way to you, but it isn’t.

1 Like