离子2：来自缓存的多个图像加载

Question

我构建了一个Ionic 2应用程序，我必须动态显示一些图片。为此，我做到了：

 <ion-menu>
  <ion-content padding>
    <ion-card *ngFor="let guid of groups">
      <ion-card-content>
        <div class="logo-header-order-response">
          <img [src]="this.pdataManager.ptools.dms.bypassSecurityTrustUrl(groups[guid].base64Image)"/>
        </div>
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-menu>

但是图片从内存缓存中加载了很多时间。我在谷歌Chrome控制台中看到了这一点：

我有两个问题：

这种多次加载会降低我的应用效果吗？

如何只加载一次？

Answer 1

您是否尝试过查看此节点模块ionic-image-loader。它有助于进行图像缓存以及我一直用于离子项目的内容。它接收一个简单的URL并将其缓存在网络访问上，并在没有网络访问时使用它。 您可以使用npm install --save ionic-image-loader进行安装。 然后使用缓存图像的<img-loader src="https://path.to/my/image.jpg"></img-loader>标记。对于具有相似网址的图片，不会进行多次抓取。您可以从共享链接中阅读更多内容。