cap-image-cache v1.0.5
Introduction 
Easy way to cache images with angular + capacitor or with (ionic + capacitor)
Compatibility
- Angular >= 10.0
ionic >= 5.x(optional)- capacitor
Features
- Store images inside local cache folder
- Lazy loading indector coming soon
- Load image once it enter the view port
- Auto detect element type src for
<img>
and background-image for other elements
Installation
To use this package you have to make sure you've already install capacitor successfully.
1. use npm install cap-image-cache
2. import the module from import { CapImageCacheModule } from "cap-image-cache";
3. import it into the main module file app.module.ts by adding CapImageCacheModule.forRoot(config)
into the imports array.
4. import it into your child module or page module by adding CapImageCacheModule
5. add [cache-img]="urlString"
into your desired element <img>
or <div>
6. use [lazy]="true"
if you want to load on viewport
Example
Cache image as element background-image style
<div [lazy]="true" cache-img="https://example.com/image.jpg">
<p>Hello, World!</p>
</div>
or add image as source base64 to an existing img element
<img [lazy]="true" cache-img="https://example.com/image.jpg" />
Configuration
const config = {
cachePath: 'CACHE_IMAGES'
}
CapImageCacheModule.forRoot(config)
To-Do
Remove[bg]
and auto detect element type- Add Lazy-Loading indector
Add on view port loading
Credits
Inspired by:
- How to Cache Image Files with Ionic & Capacitor Youtube Video by @saimon24