CODEWITHSUNDEEP
javascriptandroidiosnativescript
Miroslav Nedyalkov
Miroslav Nedyalkov

Reputation: 1131

How can I download an image and display it in a NativeScript application?

I'm creating a NativeScript application that is supposed to work on both Android and iOS. I need to display some images that are in a S3 bucket.

As I want to show some progress indicator while the image is being downloaded I think I should download the image locally instead of just setting the source property of the Image component. What is the best thing to do?

Upvotes: 0

Views: 3414

Answers (2)

Narendra
Narendra

Reputation: 4574

There is plugin available called nativescript-web-image-cache. As per their npm page:

A minimalistic NativeScript plugin that wraps just the caching functionality of SDWebImageCache library for iOS and Facebook Fresco for android. Supports local Images.

You can also check if image is loading, e.g. Get the reference to the WebImage view by using angular template variable references and @ViewChild decorator and check the isLoading property (same as that of NativeScript Image isLoading property).

Upvotes: 0

Miroslav Nedyalkov
Miroslav Nedyalkov

Reputation: 1131

After a little bit more research I found this sample https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/ and it has plenty of images downloaded from the Internet.

What I used is a module called image-cache that solves exactly this problem.

Here is what I used more precisely:

var imageSourceModule = require("image-source");
var imageCache = require("ui/image-cache");

var cache = new imageCache.Cache();
var defaultImageSource = imageSourceModule.fromFile("~/app/res/loading.gif");
var defaultNotFoundImageSource = imageSourceModule.fromFile("~/app/res/no-image.png");

cache.invalid = defaultNotFoundImageSource;
cache.placeholder = defaultImageSource;
cache.maxRequests = 5;

function displayImage(viewModel, url, propertyName) {
  var source = cache.get(url);

  propertyName = propertyName || "image";

  if (source) {
    viewModel.set(propertyName, source);
  } else {
    viewModel.set(propertyName, defaultImageSource);
    cache.push({
      key: url,
      url: url,
      completed: function (result, key) {
        if (key === url) {
          viewModel.set(propertyName, result);
        }
      }
    });
  }
}

If there is a better solution, I would be happy to learn about it.

Upvotes: 5

Related Questions