如何在 ionic 3 应用程序中使用 ion-img？

Posted 2023-03-13

【中文标题】如何在 ionic 3 应用程序中使用 ion-img？

【英文标题】：How to use ion-img in ionic 3 app?

【发布时间】：2018-04-20 19:25:23

【问题描述】：

我正在构建一个 ionic 3 应用程序，其中包含不同页面中的大量图像。我尝试了这个，使用默认的 html 图像标记。但是使用它会导致使用应用程序时出现延迟，还会遇到很多问题，比如图像屏幕旋转时尺寸会发生变化，有时会导致图像重叠，图像加载不美观。

我查阅了 Ionic 文档，发现最好使用 ion img 标签来消除这些问题。通过延迟加载，可以实现平滑滚动。我已经在使用虚拟滚动，但没有使用 ion- img 用于图像，但使用 img 标签加载图像。

当我使用 ionic 文档中给出的 ion-img 时，没有加载图像，只显示空白。这是代码，

HTML：

<ion-header>
  <ion-navbar color="dark">
    <button ion-button clear class="menubutton">
      <ion-icon name="menu" (click)="presentActionSheetCategory()"></ion-icon>
    </button>
    <ion-title><button ion-button clear (click)="goAbout()">appname</button></ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  <ion-list [virtualScroll]="categories">
          <ion-item *virtualItem="let category" class="itemcss">
              <ion-card collection-repeat="category in categories" (click)="category.golink()" class="wallcard">
                  <ion-img class='homecardimage' collection-repeat="category in categories" [src]="category.Url"></ion-img>
                  <div collection-repeat="category in categories" class="card-title">category.Name</div>
                </ion-card>
          </ion-item>
        </ion-list>
   </ion-content>

如何在 Ionic 3 中正确实现 ion-img 标签？ 谢谢。

【参考方案1】：

更新：

似乎这种行为是virtual scroller 和ion-img 中的一个错误。它已在this PR 上得到修复。但仍然没有合并。希望你可以在这里使用ionic-image-loader。你可以看到更多about this issue here。

旧反馈

你做错了。你可以试试如下图。

    <ion-list [virtualScroll]="categories">
      <ion-item *virtualItem="let category" class="itemcss">
          <ion-card (click)="category.golink()" class="wallcard">
              <ion-img class='homecardimage' [src]="category.Url"></ion-img>
              <div class="card-title">category.Name</div>
            </ion-card>
      </ion-item>
    </ion-list>

【讨论】：

你在运行时检查了吗？应用正确吗？

我的意思是图片的大小？这对空白图像是否正确？

请查看更新。

你能测试几张图片吗？可能是因为图片列表太大。

你能在设备上测试一下吗？ ionic cordova run android --prod --device

【参考方案2】：

<ion-img class='homecardimage' collection-repeat="category in categories" src="category.Url"></ion-img>