1.0.5 • Published 4 years ago

cap-image-cache v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Introduction npm version

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: