{"id":14985828,"url":"https://github.com/chukwu/ionic3-image-cache","last_synced_at":"2025-04-11T22:11:56.644Z","repository":{"id":57276174,"uuid":"140915811","full_name":"chukwu/ionic3-Image-Cache","owner":"chukwu","description":"A Simple Ionic Image Cache for all types of images with preview modal","archived":false,"fork":false,"pushed_at":"2019-08-14T09:13:06.000Z","size":51,"stargazers_count":12,"open_issues_count":14,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T22:11:51.096Z","etag":null,"topics":["angular6","component","ionic3","ionicframework","module"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chukwu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-14T04:29:58.000Z","updated_at":"2022-05-06T05:52:35.000Z","dependencies_parsed_at":"2022-08-25T01:14:20.575Z","dependency_job_id":null,"html_url":"https://github.com/chukwu/ionic3-Image-Cache","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chukwu%2Fionic3-Image-Cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chukwu%2Fionic3-Image-Cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chukwu%2Fionic3-Image-Cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chukwu%2Fionic3-Image-Cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chukwu","download_url":"https://codeload.github.com/chukwu/ionic3-Image-Cache/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487690,"owners_count":21112190,"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":["angular6","component","ionic3","ionicframework","module"],"created_at":"2024-09-24T14:11:44.824Z","updated_at":"2025-04-11T22:11:56.619Z","avatar_url":"https://github.com/chukwu.png","language":"TypeScript","readme":"\n# ionic3-Image-Cache\nA rewrite of Ionic Image Loader library that fixes the SVG issues, local URL detection and base64 detection yet maintaining all other major features. This **Ionic** plugin also includes features such as image preview. Hats of to @riron for Image viewer \n\n**Ionic** Module that loads images in a background thread and caches them for later use. Uses `FileTransfer` from `cordova-plugin-filetransfer`, and `cordova-plugin-file` via [`ionic-native`](https://github.com/driftyco/ionic-native) wrappers. This module helps to save Http requests to the server all the time thereby saving bandwidth and other HTTP related issues.\n\n![Gif](https://media.giphy.com/media/FPhRVb6Qo7rVVjGsKy/giphy.gif)\n\n## Features\n- Downloads images via a **native thread**. Images will download faster and they will not use the Webview's resources.\n- Preview images on click or tap - (can be disabled)\n- **Caches images** for later use. Remote URLs are counter matched with the file system file and returned.\n- Shows a **loading spinner** while the images are loading. (can be disabled and customised with other spinner names in ionic)\n- Allows setting a **fallback image** to be displayed in case the image you're trying to show doesn't exist on the web. (optional)\n- Works with the **[WKWebView Engine](https://github.com/apache/cordova-plugin-wkwebview-engine)** (iOS), as the images are copied to the temporary directory, which is accessible form within the WebView\n\n\n\n## Installation\n\n#### 1. Install the NPM Package\n```\nnpm install --save ionic3-image-cache\n```\n\n#### 2. Install Required Plugins and Dependency\n```\nnpm i --save @ionic-native/file\nionic cordova plugin add cordova-plugin-file\n```\n```\nnpm install --save @ionic-native/file-transfer\nionic cordova plugin add cordova-plugin-file-transfer\n```\n\n```\nnpm install --save ionic-img-viewer\n```\n\n\n#### 3. Import `IonicImageCacheModule` module\n\n**Add `IonicImageCacheModule.forRoot()` in your app's root module**\n```typescript\nimport {IonicImageCacheModule} from 'ionic3-image-cache';\n\n// import the module\n@NgModule({\n  ...\n  imports: [\n    IonicImageCacheModule.forRoot()\n  ]\n})\nexport class AppModule {}\n```\n\n# Usage\n\n## Basic Usage\nThis HTML code demonstrates basic usage of this module:\n```html\n\u003cionic-image-cache [src]=\"this.sender.profile_image.url\"\u003e\u003c/ionic-image-cache\u003e\n\n\u003cionic-image-cache [isAvatar]=\"'true'\" [showPreview]=\"'false'\" (tap)=\"whatever($event)\" [src]=\"this.sender.profile_image.url\" class=\"img-circle\"\u003e\u003c/ionic-image-cache\u003e\n```\n\nYou can also listen to the load event to be notified when the image has been loaded:\n```html\n\u003cionic-image-cache [src]=\"this.sender.profile_image.url\" (loaded)=\"onImageLoad($event)\"\u003e\u003c/ionic-image-cache\u003e\n```\n\n...\n\nonImageLoad(data) {\n  // do something with the loader\n}\n```\n\n## HTML attributes\nThe `\u003cionic-image-cache\u003e` component takes many attributes that allows you to customize the image. You can use the following table as a reference:\n```\n\n| Attribute Name | Type | Description | Default Value |\n| --- | --- | --- | --- |\n| src | string | The image URL | N/A |\n| isAvatar | boolean | Sets an avatar image as a placeholder rather than image placeholder | false |\n| showPreview | boolean | Displays a full screen version of the image with gestures. | true |\n| imgCssClass | string | You can inject css classes to the image | N/A |\n| highResSrc | string | Set a highres image to use for image preview on click when showPreview is set to true | Original Src |\n| fallbackUrl | string | Sets a custom placeholder image Url while awaiting cache load | N/A |\n| spinnerName | string | Set a spinner name from the list of ionic spinners list | dots |\n| spinnerColor | string | Set a spinner color from your variable set at variables.scss e.g primary | Default |\n| alt | string | Sets an alternative text when image fails on browser | N/A |\n| enableSpinner | boolean | Enable or disable spinner | true |\n\n**Note:** Upcoming features. Please contribute your features.\n\n- Typescript options from controller\n- Clear cache\n- Max cache settings\n- Cache lifespan\n\n\n\u003cbr\u003e\u003cbr\u003e\n## Contribution\n- **Having an issue**? or looking for support? [Open an issue](https://github.com/chukwu/ionic3-Image-Cache/issues/new) and we will get you the help you need.\n- Got a **new feature or a bug fix**? Fork the repo, make your changes, and submit a pull request.\n\n## Support this project\nIf you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile:\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchukwu%2Fionic3-image-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchukwu%2Fionic3-image-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchukwu%2Fionic3-image-cache/lists"}