NativeScript Core

Image Cache

The image-cache module contains the Cache class, which handles image download requests and caches the already downloaded images.


Using Cache objects requires the tns-core-modules/ui/image-cache module.

Requesting and caching images with image-cache module while using a placeholder image.

const cache = new Cache();
cache.placeholder = fromFile("~/images/logo.png");
cache.maxRequests = 5;

// set the placeholder while the desired image is donwloaded
viewModel.set("imageSource", cache.placeholder);

// Enable download while not scrolling

let cachedImageSource;
const url = "";
// Try to read the image from the cache
const image = cache.get(url);

if (image) {
    // If present -- use it.
    cachedImageSource = imageSource.fromNativeSource(image);
    viewModel.set("imageSource", cachedImageSource);
} else {
    // If not present -- request its download + put it in the cache.
        key: url,
        url: url,
        completed: (image, key) => {
            if (url === key) {
                cachedImageSource = fromNativeSource(image);
                viewModel.set("imageSource", cachedImageSource); // set the downloaded iamge

// Disable download while scrolling

Improve this document

Demo Source

API Reference for

See Also Android Image Optimization