时间戳

首页 > 解决方案 > 离子图像滑块未在 iOS 上加载

ios - 离子图像滑块未在 iOS 上加载

问题描述

我有一个 ionic 应用程序，其中包含一个图像滑块，它使用 ion-slides 组件在从 url 检索的图像之间提供幻灯片。

我的问题是图像在 Android 上正确显示，但在 iOS 上图像不显示，只有当将设备旋转到横向时，图像才会出现，然后也可以在纵向模式下工作。

有关如何使图像在 iOS 上正确显示的任何建议？

以下是我的代码示例：

<ion-content padding>
  <ion-slides pager
  #imageSlider>
    <ion-slide *ngFor='let url of imageUrls'>
      <ion-img [src]='url'></ion-img>
    </ion-slide>
  </ion-slides>
</ion-content>

在打字稿文件中，imageUrls 是一个字符串类型的数组，包含要加载的图像的 URL。

标签： iosangularionic-frameworkmobileionic3

解决方案

我找到了解决方案。

  1. 改成<ion-img>了普通的img

  2. 在打字稿文件中，将以下内容添加到ionViewCanEnter：

    @ViewChild('imageSlider') slider: Slides;

...

ionViewCanEnter() {
   this.slider.centeredSlides = true;
}

图像现在加载到 iOS 上。

模板样本：

<ion-content padding>
   <ion-slides pager
   #imageSlider>
   <ion-slide *ngFor='let url of imageUrls'>
      <img [src]='url'>
   </ion-slide>
   </ion-slides>
</ion-content>

推荐阅读