Nativescript - 如何显示文档目录中的图像？

Question

我正在构建一个主要用于离线使用的应用。 用户可以从 Web 下载图像，我可以在我的 Nativescript 应用程序的文档文件夹 (fs.knownFolders.documents()) 中看到上传的图像。

过去几个小时我一直在尝试在我的视图中显示下载的图像，但没有成功。

据我了解（可能是错误的），这与仅指定“~/myImage.jpg”的图像 src 不同。

虽然这不是我的确切应用，但它遵循相同的原则并给我们一些代码来验证。

ma​​in-page.js：

var observable = require("data/observable");
var imageSource = require("image-source");
var fs = require("file-system");

exports.pageLoaded = function() {

    var viewModel = new observable.Observable();
    http.getFile("https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").then(function (r) {
        //the getFile downloads to the root documents path, shown below

        var folder = fs.knownFolders.documents();
        var path = fs.path.join(folder.path, "googlelogo_color_272x92dp.png");
        var image = imageSource.fromFile(path);
        //have also tried grabbing the image by id, and setting its src.

        viewModel.set("image", image);

    }, function (e) {
        //// Argument (e) is Error!
    });
    viewModel.set("image", null);

    page.bindingContext = viewModel;

}

和ma​​in-page.xml：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Image width="80" src="{{image}}" height="80" stretch="none" />
    </StackLayout>
</Page>

作为参考，我使用的是 tns javascript（不是 Angular）和 tns 版本 2.0.1。目前，我只关心 iOS。

非常感谢任何帮助！

Answer 1

试试这个：

1) 使用http.getImage

2) 通过其 ID 获取 Image 视图

3) 将imageSource设置为getImage的响应

4)保存文件

http.getImage("https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").then(function (r) {
        var imgview = page.getViewById("id_of_image_view");
        imgview.imageSource = r;
        var saved = imgView.imageSource.saveToFile(path,'jpg');

    }};