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