Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
AngularJS2 / Ionic2 : ImageCache Directive to use with imgcache.js
import { Directive, ElementRef, Input } from '@angular/core';
declare var ImgCache: any;
selector: '[image-cache]'
export class ImageCacheDirective {
constructor (
private el: ElementRef
) {
// init
ngOnInit() {
this.el.nativeElement.crossOrigin = "Anonymous"; // CORS enabling
ImgCache.isCached(this.el.nativeElement.src, (path: string, success: any) => {
console.log('path - '+ path);
console.log('success - '+ success);
if (success) {
// already cached
console.log('already cached so using cached');
} 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);
Copy link

gsthina commented Nov 24, 2016

Do we have to overwrite this file to or just adding your file to our ionic2 project is sufficient!?

Copy link

guyaloni commented Feb 15, 2017

I had the same problem as @ChristianBruno.

I tried adding imgcache.js with:
npm install imgcache.js --save

Then instead of:
import ImgCache from 'imgcache.js';
I used
import ImgCache from 'imgcache.js';

Now the application runs, but the cache feature doesn't work :-(
I have an dynamic image which is generated with timestamp inside it, in order to check the cache (with php imagecreate).
If I add a delay (sleep(10) for example), the image in not shown till the delay is finished.
And if I remove the image from server, I get a broken-image-url symbol...

Some helpful information:
In ImageCacheDirective I added a concole.log message on the beginning of ngOnInit. I get to see it.
However, the log messages on the beginning of the ImgCache.isCached callback are not shown - callback is not called.

Copy link

alshdotme commented Feb 28, 2017


Create a file called declarations.d.ts file and inside this add

declare module 'imgcache.js';

Then in your component add

import ImgCache from 'imgcache.js';

Sorry if you've already done this, I got a hunch you might have not.

Copy link

mm580486 commented Sep 27, 2017

hi thanks for this code
how to use this code on api call ? not problem ?

Copy link

smkamranqadri commented Oct 2, 2017

Cross-origin error :-(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment