Android设备上的ION-IMG显示问题

Question

我在模态中显示图像。它在Web上工作正常，但在Android设备上仅间歇性地显示图像（否则显示没有图像占位符）。如果我通过单击缩略图来关闭并重新打开模式/图像，则大约有25％的时间显示图像。

我认为这与我作为参数传递的base64图像数据的异步加载有关。我猜该页面在加载之前呈现。有什么想法可以解决这个问题？

模态调用：

 <ion-col size="3" *ngFor="let image of check.images">
  <ion-thumbnail>
     <ion-img [src]="image" (click)="onViewImage(image)"></ion-img>
  </ion-thumbnail>
 </ion-col>
constructor(private plt: Platform,
              private fileOpener: FileOpener,
              public defectReportService: DefectReportService,
              private router: Router,
              private route: ActivatedRoute,
              private socialSharing: SocialSharing,
              public storage: Storage,
              private notificationService: NotificationService,
              public modalCtrl: ModalController,
              private navCtrl: NavController
              ) { }
onViewImage(imageDataUrl: string) {
this.modalCtrl.create({
    component: ViewImageComponent,
    componentProps: { imageDataUrl: imageDataUrl }
  }).then(modalEl => {
    modalEl.present();
  });

}

模态代码：

 <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();
  }
}

Answer 1

使用navParams解决方案修复了此处：

https://medium.com/@david.dalbusco/how-to-declare-and-us-modals-in-ionic-ionic-v4-4d3f42ac30a3

以下代码有100％的时间工作：

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>