Question

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

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

根据我的理解（可能是错的），这不仅仅是指定＆＃34;〜/ myImage.jpg＆＃34;的图像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（非角度）和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 - 如何从文档目录中显示图像？

1 个答案: