angular - Android 设备上的 ion-img 显示问题
问题描述
我正在以模式显示图像。它在网络上运行良好,但在 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();
}
}
解决方案
在此处使用 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>
推荐阅读
- python - Trying to call a range of instances from a class using for loops
- python - 涉及字典和列表的数据转换的可能改进
- mysql - Why doesn't this (mysql) UNION solve my problem?
- vue.js - 如何将芯片放入 vuetify 中的文本字段?/ 如何创建主题标签(在文本字段中)?
- php - PhalconPHP 无法在另一个控制器中获取会话值
- python - 根据来自另一个 pandas 数据帧的列的排序对列进行排序
- activiti - 如何通过 Activiti/Flowable API 的 formKey 读取表单字段
- javascript - 如何将字符串添加到变量中
- sparql - 在 Protege 中使用 SPARQL 推断数据
- typescript - How to set input variables when debugging Azure DevOps custom Tasks in VS Code and TypeScript