{"id":26282951,"url":"https://github.com/brhoomjs/cap-image-cache","last_synced_at":"2026-05-10T00:45:48.213Z","repository":{"id":57193898,"uuid":"434370831","full_name":"brhoomjs/cap-image-cache","owner":"brhoomjs","description":"Easy way to cache images with angular and capacitor or with ionic and capacitor","archived":false,"fork":false,"pushed_at":"2021-12-03T16:26:00.000Z","size":209,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T15:47:35.183Z","etag":null,"topics":["angular","capacitor","image-cache","ionic"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brhoomjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-02T20:50:09.000Z","updated_at":"2021-12-03T16:26:50.000Z","dependencies_parsed_at":"2022-09-26T18:10:43.348Z","dependency_job_id":null,"html_url":"https://github.com/brhoomjs/cap-image-cache","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brhoomjs%2Fcap-image-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brhoomjs%2Fcap-image-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brhoomjs%2Fcap-image-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brhoomjs%2Fcap-image-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brhoomjs","download_url":"https://codeload.github.com/brhoomjs/cap-image-cache/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243615631,"owners_count":20319733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","capacitor","image-cache","ionic"],"created_at":"2025-03-14T17:16:06.914Z","updated_at":"2026-05-10T00:45:48.097Z","avatar_url":"https://github.com/brhoomjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction [![npm version](https://badge.fury.io/js/cap-image-cache.svg)](https://www.npmjs.com/package/cap-image-cache)\nEasy way to cache images with angular + capacitor or with (ionic + capacitor)\n## Compatibility\n-  [x] Angular \u003e= 10.0\n-  [x] ~~ionic \u003e= 5.x~~ (optional)\n-  [x] capacitor\n## Features\n-  [x] Store images inside local cache folder\n-  [x] Lazy loading indector **coming soon**\n-  [x] Load image once it enter the view port\n-  [x] Auto detect element type ***src*** for `\u003cimg\u003e` and ***background-image*** for other elements\n## Installation\nTo use this package you have to make sure you've already install capacitor successfully.\n1. use `npm install cap-image-cache`\n2. import the module from `import { CapImageCacheModule } from \"cap-image-cache\";`\n3. import it into the main module file **app.module.ts** by adding `CapImageCacheModule.forRoot(config)` into the imports array.\n4. import it into your child module or page module by adding `CapImageCacheModule`\n5. add `[cache-img]=\"urlString\"` into your desired element `\u003cimg\u003e` or `\u003cdiv\u003e`\n6. use `[lazy]=\"true\"` if you want to load on viewport\n## Example\nCache image as element **background-image** style\n```\n\u003cdiv [lazy]=\"true\" cache-img=\"https://example.com/image.jpg\"\u003e\n\t\u003cp\u003eHello, World!\u003c/p\u003e\n\u003c/div\u003e\n```\nor add image as source base64 to an existing img element\n`\u003cimg [lazy]=\"true\" cache-img=\"https://example.com/image.jpg\" /\u003e`\n## Configuration\n```\nconst config = {\n\tcachePath: 'CACHE_IMAGES'\n}\nCapImageCacheModule.forRoot(config)\n```\n## To-Do\n-  [x] ~~Remove `[bg]` and auto detect element type~~\n- [ ] Add Lazy-Loading indector\n-  [x] ~~Add on view port loading~~\n## Credits\nInspired by:\n- How to Cache Image Files with Ionic \u0026 Capacitor [Youtube Video](https://www.youtube.com/watch?v=l7hsRrjLGUY\u0026t=899s) by [@saimon24](https://github.com/saimon24)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrhoomjs%2Fcap-image-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrhoomjs%2Fcap-image-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrhoomjs%2Fcap-image-cache/lists"}