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显示问题

1 个答案: