ng-imagecache
Angular 2+ / Ionic 2+ module to cache images for offline use.
Important Note: this module supports Angular / Ionic versions 2 and above only. For Angular 1.x / Ionic 1.x, consider angular-imgcache.js, which this module was inspired by.
Installation
npm install ng-imgcache
Usage
Ionic 2+
1. Install Cordova plugins:
cordova plugin add cordova-plugin-file cordova-plugin-file-transfer
2. Import the ImgCacheModule
:
//app.module.ts;;;;;
3. Initialise the cache in your AppComponent
:
// app.component.ts;;;;;;
4. Use the directive in your component templates:
;;
That's it!
Angular 2+
TBC: a very similar process to above.
How it works
Image URLs that are specified in a img-cache-src
or img-cache-bg-url
attribute will be downloaded and cached for subsequent offline use by the included imgcache.js
library.
Tip: make sure you use img-cache-src
with <img>
tags, as this will set the src
attribute of the <img>
tag to the cached image. For other elements, you can use the img-cache-bg-url
attribute, which will set the background-image
style of the element to point to the cached image.
License
MIT
Credits
Inspired by angular-imgcache.js, this module was rewritten to support Angular 2+ and Ionic 2+ projects. Uses the excellent imgcache.js library.