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>

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

ion-img display issue on Android device

angular

ionic4