Caching 离子2缓存图像

我正在编写一个ionic 2应用程序，希望缓存图像

在网上搜索了很长时间后，我找到了以下参考资料：

我实现了给定的解决方案，但我发现ImgCache模块的行为与预期不符-从未调用

ImgCache.isCached

回调。

有没有在ionic 2中缓存图像的想法或其他好的解决方案

=======更新==========

以下是我使用的指令代码：

import { Directive, ElementRef, Input } from '@angular/core';

import ImgCache from 'imgcache.js';

@Directive({
  selector: '[image-cache]'
})
export class ImageCacheDirective {
  constructor (
    private el: ElementRef
  ) {
    // init
  }

  ngOnInit() {
    // This message is shown in console
    console.log('ImageCacheDirective *** ngOnInit: ', this.el.nativeElement.src);

    this.el.nativeElement.crossOrigin = "Anonymous"; // CORS enabling

    ImgCache.isCached(this.el.nativeElement.src, (path: string, success: any) => {
      // These message are never printed
      console.log('path - '+ path);
      console.log('success - '+ success);

      if (success) {
        // already cached
        console.log('already cached so using cached');

        ImgCache.useCachedFile(this.el.nativeElement);
      } else {
        // not there, need to cache the image
        console.log('not there, need to cache the image - ' + this.el.nativeElement.src);

        ImgCache.cacheFile(this.el.nativeElement.src, () => {
          console.log('cached file');

          // ImgCache.useCachedFile(el.nativeElement);
        });
      }
    });
  }
}

在app.nomble.es中，我会：

import { ImageCacheDirective } from '../components/image-cache-directive/image-cache-directive';

然后在home.html中：

<img src="http://localhost/ionic-test/img/timeimg.php" image-cache>

---

已经很晚了，但可能这就是解决方案：

1。安装cordova FileTransfer:

ionic plugin add cordova-plugin-file-transfer --save

2。当cordova的deviceready事件触发时初始化ImgCache。在src/app/app.component.ts中添加这些方法（或将它们与initializeApp（）方法集成-此方法提供默认项目开始）：

---

另一种选择是为ionic使用专用缓存管理器。而不是靠你自己实现一切

这里有两个选项： 1.通用缓存实现： 2.这一个更适合图像：

编辑：

---

这不是一个“仅链接”的答案。。它告诉用户使用现成的实现，而不是尝试从头开始实现。

请添加代码中声明/使用模块的部分我不敢相信图像缓存会被ionic社区忽略。为什么使用文件传输而不是ionic存储？@VanDir我想缓存从中获取的动态图像火基。在html中，我使用*ngFor循环数据。在这些应用程序中，如何缓存图像

initImgCache() {
    // activated debug mode
    ImgCache.options.debug = true;
    ImgCache.options.chromeQuota = 100 * 1024 * 1024; // 100 MB
    ImgCache.init(() => { },
        () => { console.log('ImgCache init: error! Check the log for errors'); });
}

initializeApp() {
    this.platform.ready().then(() => {
        this.initImgCache();

        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        StatusBar.styleDefault();
        Splashscreen.hide();
    });
}