Ion-img only showing randomly - component init issue (hopefully easy fix)

Ionic Framework ionic-v3
1

I am displaying an image in a modal.
It works fine on web but on an Android device it only intermittently shows the image (otherwise it shows a no image placeholder).
If I get closing and reopening the modal / image by clicking on the thumbnail, about 25% of the time it shows the image ok.

I figure its something to do with the async loading of the base64 image data I am passing in as a parameter. Any ideas to fix this?

<ion-content class="content-modal">
  <div class="content-inner">
      <ion-img [src]="imageDataUrl" (click)="onCloseModal()"></ion-img>
  </div>
</ion-content>

export class ViewImageComponent implements OnInit {
  @Input() imageDataUrl: string;

  constructor(private modalCtrl: ModalController) { }

  ngOnInit() {
  }

  onCloseModal() {
    this.modalCtrl.dismiss();
  }

}
2

Fixed using the NavParams solution here:

The code below works 100% of the time:

export class ViewImageComponent implements OnInit {
  @Input() imageDataUrl: string;
  imageDataUrl2: string;

  constructor(private modalCtrl: ModalController,
              private navParams: NavParams) { }

  ngOnInit() {
  }
  ionViewWillEnter() {
    this.imageDataUrl2 = this.navParams.get('imageDataUrl');

  }

  onCloseModal() {
    this.modalCtrl.dismiss();
  }

}

<ion-content class="content-modal">
  <div *ngIf="imageDataUrl2" class="content-inner">
      <ion-img [src]="imageDataUrl2" (click)="onCloseModal()"></ion-img>
  </div>
</ion-content>
3

Oh and the weird thing is if you use this code below with the local variable the same name as the parameter that is passed to the modal it will not work properly, same intermittent problem.
So don’t do this.

export class ViewImageComponent implements OnInit {
  imageDataUrl: string;

  constructor(private modalCtrl: ModalController,
              private navParams: NavParams) { }

  ngOnInit() {
  }
  ionViewWillEnter() {
    this.imageDataUrl = this.navParams.get('imageDataUrl');

  }

  onCloseModal() {
    this.modalCtrl.dismiss();
  }

}

<ion-content class="content-modal">
  <div *ngIf="imageDataUrl" class="content-inner">
      <ion-img [src]="imageDataUrl" (click)="onCloseModal()"></ion-img>
  </div>
</ion-content>