https://github.com/brhoomjs/cap-image-cache
Easy way to cache images with angular and capacitor or with ionic and capacitor
https://github.com/brhoomjs/cap-image-cache
angular capacitor image-cache ionic
Last synced: about 1 year ago
JSON representation
Easy way to cache images with angular and capacitor or with ionic and capacitor
- Host: GitHub
- URL: https://github.com/brhoomjs/cap-image-cache
- Owner: brhoomjs
- License: mit
- Created: 2021-12-02T20:50:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-03T16:26:00.000Z (over 4 years ago)
- Last Synced: 2025-03-13T15:47:35.183Z (about 1 year ago)
- Topics: angular, capacitor, image-cache, ionic
- Language: TypeScript
- Homepage:
- Size: 204 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Introduction [](https://www.npmjs.com/package/cap-image-cache)
Easy way to cache images with angular + capacitor or with (ionic + capacitor)
## Compatibility
- [x] Angular >= 10.0
- [x] ~~ionic >= 5.x~~ (optional)
- [x] capacitor
## Features
- [x] Store images inside local cache folder
- [x] Lazy loading indector **coming soon**
- [x] Load image once it enter the view port
- [x] Auto detect element type ***src*** for `![]()
` 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 `![]()
` or `
`
6. use `[lazy]="true"` if you want to load on viewport
## Example
Cache image as element **background-image** style
```
Hello, World!
```
or add image as source base64 to an existing img element
`![]()
`
## Configuration
```
const config = {
cachePath: 'CACHE_IMAGES'
}
CapImageCacheModule.forRoot(config)
```
## To-Do
- [x] ~~Remove `[bg]` and auto detect element type~~
- [ ] Add Lazy-Loading indector
- [x] ~~Add on view port loading~~
## Credits
Inspired by:
- How to Cache Image Files with Ionic & Capacitor [Youtube Video](https://www.youtube.com/watch?v=l7hsRrjLGUY&t=899s) by [@saimon24](https://github.com/saimon24)