Nativescript

Question

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

我花了最后几个小时尝试在我的视图中显示下载的图像，但没有成功。

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

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

主要-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;

}

和main-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');

    }};

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

Nativescript - how to display image from documents directory?

imageview