Introduction

Easy way to cache images with angular + capacitor or with (ionic + capacitor)

Compatibility

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

To use this package you have to make sure you've already install capacitor successfully.

use npm install cap-image-cache
import the module from import { CapImageCacheModule } from "cap-image-cache";
import it into the main module file app.module.ts by adding CapImageCacheModule.forRoot(config) into the imports array.
import it into your child module or page module by adding CapImageCacheModule
add [cache-img]="urlString" into your desired element <img> or <div>
use [lazy]="true" if you want to load on viewport

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" />

const config = {
	cachePath: 'CACHE_IMAGES'
}
CapImageCacheModule.forRoot(config)

Inspired by: