Javascript 如何下载图像并在NativeScript应用程序中显示？

我正在创建一个NativeScript应用程序，它应该可以在Android和iOS上运行。我需要显示S3存储桶中的一些图像

---

因为我想在下载图像时显示一些进度指示器，所以我认为应该在本地下载图像，而不仅仅是设置图像组件的源属性。最好的做法是什么？

经过进一步研究，我发现了这个样本，它有大量从互联网下载的图像

我使用的是一个名为图像缓存的模块，它正好解决了这个问题

以下是我更准确地使用的：

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);
        }
      }
    });
  }
}

---

如果有更好的解决方案，我会很高兴了解它。

经过进一步研究，我发现了这个示例，它有大量从互联网下载的图像

我使用的是一个名为图像缓存的模块，它正好解决了这个问题

以下是我更准确地使用的：

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);
        }
      }
    });
  }
}

---

如果有更好的解决方案，我很乐意了解。

有一个插件名为。根据其npm页面：

一个简约的NativeScript插件，只包装缓存 iOS和Facebook Fresco的SDWebImageCache库的功能 对于android。支持本地图像

---

您还可以检查图像是否正在加载，例如，通过使用角度模板变量引用和@ViewChild decorator获取对WebImage视图的引用，并检查isLoading属性（与NativeScript image isLoading属性相同）。

有可用的插件调用。根据其npm页面：

一个简约的NativeScript插件，只包装缓存 iOS和Facebook Fresco的SDWebImageCache库的功能 对于android。支持本地图像

您还可以检查图像是否正在加载，例如，通过使用角度模板变量引用和@ViewChild decorator获取对WebImage视图的引用，并检查isLoading属性（与NativeScript图像isLoading属性相同）