nativescript 图像缓存模块不按示例工作

Question

使用 nativescript.org 网站上提供的示例 我创建了一个页面来测试图像缓存组件。 tns-core-modules/ui/image-cache

cache.push() 工作正常。 任何时候我使用 cache.get(url) 对象都会返回 null。我永远无法检索缓存的图像。

在推送完成后，似乎可以从缓存中检索图像，但似乎无法保留。

这发生在模拟器以及实际连接的安卓设备上。

我尝试从头开始创建一个空的地狱世界 JavaScript 应用程序 tns create --template tns-template-hello-world 来测试样本并遇到同样的问题。

    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
cache.enableDownload();

let cachedImageSource;
const url = "https://avatars1.githubusercontent.com/u/7392261?v=4";
// 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.
    cache.push({
        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
cache.disableDownload();

Answer 1

image-cache 模块没有持久存储。此处的图像永远不会写入磁盘，它只是将图像缓存在内存中，仅用于当前会话，一旦您的应用关闭，它将丢失所有下载的图像。

或者，如果队列达到分配的最大内存（即设备总内存的 1/8），则队列中最旧的图像将被标记为进行垃圾回收。在这种情况下，如果您再次请求图像，则必须再次下载。

如果我理解正确，您希望将图像缓存在持久存储上，以便在后续应用启动时无需再次下载。您可以通过使用 Http 模块下载图像并将其写入文件来手动执行此操作。我们也有一些用于相同目的的插件，nativescript-web-image-cache 或 nativescript-image-cache-it 在这里很少提及。

Answer 2

正如 Manoj 所说，图像缓存在内存缓存中，预计在初始加载时会收到 null。但是，一旦图像被加载，您应该能够毫不费力地检索它。

为了您的方便，我提取了cutness.io 测试应用here。在应用程序中，image-cache 用于为列表视图中的每个项目加载带有占位符的缩略图。您可以在这一行看到cache.get 将在初始加载时返回null，但在您向下和向上滚动列表项后，顺序加载将返回对本机图像的引用（see this line）。请注意，我们没有关闭应用程序，并且在视图模型中使用图像缓存来加载 thumbnail 属性 - 在 ListView 控件的上下文中，这意味着每次渲染单元格时都会触发 getter（上下滚动触发回收和渲染单元格，这将触发绑定）。