# nativescript-image-cache-it > Image caching plugin for NativeScript Latest version **6.3.6** (published 2020-12-20) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install nativescript-image-cache-it pnpm add nativescript-image-cache-it yarn add nativescript-image-cache-it bun add nativescript-image-cache-it ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 6.3.6 | | Published | 2020-12-20 | | First published | 2016-04-09 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 227.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Osei Fortune | | Maintainers | triniwiz | | Keywords | NativeScript, JavaScript, Android, iOS | ## Links - npm: https://www.npmjs.com/package/nativescript-image-cache-it - Homepage: https://github.com/triniwiz/nativescript-image-cache-it - Issues: https://github.com/triniwiz/nativescript-image-cache-it/issues - npm.io page: https://npm.io/package/nativescript-image-cache-it ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 6.3.6 (latest) — 2020-12-20 - 6.3.5 — 2020-10-23 - 6.3.4 — 2020-10-20 - 6.3.3 — 2020-10-20 - 6.3.2 — 2020-10-18 - 6.3.1 — 2020-10-18 - 6.3.0 — 2020-10-17 - 6.2.0 — 2020-10-17 - 6.1.0 — 2020-10-11 - 6.0.6 — 2020-10-11 - 6.0.5 — 2020-10-11 - 6.0.4 — 2020-10-09 - 6.0.3 — 2020-10-09 - 6.0.2 — 2020-10-09 - 6.0.1 — 2020-10-09 - … 86 more at https://npm.io/package/nativescript-image-cache-it/versions ## README [![npm](https://img.shields.io/npm/v/nativescript-image-cache-it.svg)](https://www.npmjs.com/package/nativescript-image-cache-it) [![npm](https://img.shields.io/npm/dt/nativescript-image-cache-it.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-image-cache-it) [![Build Status](https://travis-ci.org/triniwiz/nativescript-image-cache-it.svg?branch=master)](https://travis-ci.org/triniwiz/nativescript-image-cache-it) # Image-Cache-It [_Glide_](https://github.com/bumptech/glide/) - _Android_ [_SDWebImage_](https://github.com/rs/SDWebImage/) - _IOS_ ## Install #### NativeScript 6.5x * `tns plugin add nativescript-image-cache-it` #### NativeScript 4x * `tns plugin add nativescript-image-cache-it@5.0.0-beta.20` #### NativeScript 3x * `tns plugin add nativescript-image-cache-it@3.0.7` #### NativeScript 2x * `tns plugin add nativescript-image-cache-it@1.6.0` ## Usage ```ts import { ImageCacheIt } from 'nativescript-image-cache-it'; // **new** call in your app.ts/ main.ts/ app.js to enable image-cache to hook into the device's lowmemory events ImageCacheIt.enableAutoMM(); ``` Set image url to load. ```js load = image; ``` Set placeholder while images are downloading. ```js placeHolder = '~/assets/images/ph.png'; ``` Set placeholder for images are that failed to download. ```js errorHolder = '~/assets/images/broken.png'; ``` Set decoded image size. ```js decodedWidth = '300'; decodedHeight = '300'; ``` Stretch ```js stretch = "aspectFit" // (optional) aspectFit || aspectFill || fill || none ``` Prefetch ```typescript import { ImageCacheIt } from 'nativescript-image-cache-it'; ImageCacheIt.fetchItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch(); ``` Delete item from cache ```typescript import { ImageCacheIt } from 'nativescript-image-cache-it'; ImageCacheIt.deleteItem('https://source.unsplash.com/random').then().catch(); ``` Get item from cache ```typescript import { ImageCacheIt } from 'nativescript-image-cache-it'; ImageCacheIt.getItem('https://source.unsplash.com/random').then(imageUrl =>{}).catch(); ``` e.g ```ts import { ImageCacheIt } from 'nativescript-image-cache-it'; let cache = new ImageCacheIt(); cache.src = image; cache.placeHolder = '~/assets/images/broken.png'; cache.errorHolder = '~/assets/images/ph.png'; cache.decodedWidth = '300'; cache.decodedHeight = '300'; cache.filter = 'blur(10px);'; cache.stretch = 'aspectFit'; return cache; ``` Xml markup settings ```xml decodedWidth="300"; decodedHeight="300"; placeHolder="~/assets/images/ph.png" errorHolder="~/assets/images/broken.png" stretch = "aspectFit" src= "http://screenrant.com/wp-content/uploads/The-Flash-vs-the-Reverse-Flash.jpg" ``` IMPORTANT: Make sure you include xmlns:i="nativescript-image-cache-it" on the Page element e.g ```xml ``` ### Angular ```ts import { TNSImageCacheItModule } from 'nativescript-image-cache-it/angular'; @NgModule({ imports: [ TNSImageCacheItModule ], declarations: [ AppComponent ], bootstrap: [AppComponent] }) ``` ### Screenshots #### Repeater | Image | ImageCacheIt | | ---------------------------------------------------------- | -------------------------------------------------------------------- | | ![image_repeater](screenshots/image_repeater.gif?raw=true) | ![imagecacheit_repeater](screenshots/cache-it_repeater.gif?raw=true) | #### ListView | Image | ImageCacheIt | | ----------------------------------------------------------- | --------------------------------------------------------------------- | | ![image_listview](screenshots/image_list_view.gif?raw=true) | ![imagecacheit_listview](screenshots/cache-it_list_view.gif?raw=true) | --- _Source: https://npm.io/package/nativescript-image-cache-it · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._