title: ionic 2 caching images
body: <p>I am writing an ionic 2 application, and want to cache images.</p>
  
  <p>After long searching on the web I found these references:
  <a href="https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e" rel="nofollow noreferrer">https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e</a></p>
  
  <p><a href="https://github.com/chrisben/imgcache.js/blob/master/js/imgcache.js" rel="nofollow noreferrer">https://github.com/chrisben/imgcache.js/blob/master/js/imgcache.js</a></p>
  
  <p>I implemented the given solution, but i see that the ImgCache module does not behave as expected - <strong>the <code>ImgCache.isCached</code> callback is never called.</strong></p>
  
  <p>Any idea or other good solution for caching images in ionic 2?</p>
  
  <p>======== UPDATE ==========</p>
  
  <p>Here is the directive code I use:</p>
  
  <pre><code>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) =&gt; {
        // 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, () =&gt; {
            console.log('cached file');
  
            // ImgCache.useCachedFile(el.nativeElement);
          });
        }
      });
    }
  }
  </code></pre>
  
  <p>In <strong>app.nodule.es</strong> I do:</p>
  
  <pre><code>import { ImageCacheDirective } from '../components/image-cache-directive/image-cache-directive';
  </code></pre>
  
  <p>and then in home.html:</p>
  
  <pre><code>&lt;img src="http://localhost/ionic-test/img/timeimg.php" image-cache&gt;
  </code></pre>