Android设备上的ion-img显示问题

Question

我正在以模态显示图像。它在网络上运行良好，但在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-use-modals-in-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>