离子2缓存图像 [英] ionic 2 caching images

问题描述

我正在写一个离子2应用程序，并希望缓存图像。

I am writing an ionic 2 application, and want to cache images.

经过长时间在网上搜索后，我发现这些引用：
https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e

After long searching on the web I found these references: https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e

https://github.com/chrisben /imgcache.js/blob/master/js/imgcache.js

我实现了给定的解决方案，但是我看到ImgCache模块的行为不像预期 - 永远不会调用 ImgCache.isCached 回调。

I implemented the given solution, but i see that the ImgCache module does not behave as expected - the ImgCache.isCached callback is never called.

任何想法或其他在离子2中缓存图像的好方法？

Any idea or other good solution for caching images in ionic 2?

======== UPDATE ==========

======== UPDATE ==========

这是我使用的指令代码：

Here is the directive code I use:

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.nodule.es 我这样做：

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

然后在home.html中：

and then in home.html:

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

推荐答案

另一种选择是使用离子专用缓存管理器。而不是自己实现所有内容。

Another option is to use a dedicated cache manager for ionic. instead of implementing everything on your own.

以下是2个选项：
1.通用缓存实现： https://github.com/Nodonisko/ionic-cache
2.这个更适合图像： https://github.com/BenBBear/ionic-cache-src

编辑：
这不是仅链接答案..它告诉用户使用现成的实现，而不是尝试从头开始实现。

This is not a "link only" answer.. it tells the user to use a ready made implementations instead of trying to implement from scratch.

这篇关于离子2缓存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！