如何在离子3 app中使用ion-img？-Java 学习之路

我正在构建一个离子3应用程序，其中包含不同页面中的大量图像 . 我尝试使用默认的HTML图像标记 . 但是使用它会导致使用应用程序时滞后，还会遇到许多问题，例如图像大小更改时屏幕旋转导致有时图像重叠，图像丑陋加载 .

我查看了Ionic文档，发现最好使用ion img标签来删除这些问题 . 使用延迟加载，可以实现平滑滚动 . 我已经使用虚拟滚动，但不使用ion-img进行图像处理，但使用img标签加载图像 .

当我在离子文档中使用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标签？谢谢 .

2 回答

Update:

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

Old Feedback

你做错了 . 您可以尝试如下所示 .

<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>

回复于 2024-05-02T17:10:05+08:00

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

回复于 2024-05-02T17:10:05+08:00

如何在离子3 app中使用ion-img？

2 回答

相关问题