在 Nativescript 中，来自 imageSource.fromUrl 的结果显示为 { "android" ：{}}

Question

当遵循链接https://docs.nativescript.org/cookbook/image-source时，在控制台中，我得到的结果是{"android":{}}在我的android设备中。

下面是我的js代码

var createViewModel = require("./main-view-model").createViewModel;
var imageSource = require("image-source");
function onNavigatingTo(args) {
    var page = args.object;
    imageSource.fromUrl("https://www.google.com/images/errors/logo_sm_2.png")
    .then(function (res) {
        console.log("Image successfully loaded");
        console.log(JSON.stringify(res));
    }, function (error) {
        //console.log("Error loading image: " + error);
    });
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

我们应该做更多的事情来获得图像吗?如果问题是太基本的道歉，只是了解原生脚本

Answer 1

有几种方法可以从URL加载图像-你可以通过后面的代码创建image的实例，并将imageSource附加到它的src，然后动态地将图像添加到页面容器元素(例如grid-layout, stack-layout或其他)

或者，您可以使用数据绑定，一旦获得imagagesource，就将其与视图模型绑定。

例子:

page.js

var observable_1 = require('data/observable');
var imageSource = require("image-source");
function navigatingTo(args) {
    var page = args.object;
    var viewModel = new observable_1.Observable();
    imageSource.fromUrl("https://www.google.com/images/errors/logo_sm_2.png")
        .then(function (res) {
        viewModel.set("myUrl", res);
    }, function (error) {
        //console.log("Error loading image: " + error);
    });
    page.bindingContext = viewModel;
}
exports.navigatingTo = navigatingTo;

page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout>
    <Label text="ImageSource fromUrl example" class="title"/>
    <Image src="{{ myUrl }}" stretch="none" />
  </StackLayout>
</Page>