在 Nativescript 中，imageSource.fromUrl 的结果为 {"android":{}}

Question

在控制台中遵循 link 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;

我们是否应该做更多的事情来获得图像。抱歉，如果问题太基础，只是了解 Nativescript

Answer 1

有几种方法可以从 URL 加载图像 - 您可以通过代码隐藏创建图像实例并将图像源附加到它的 src，然后将图像动态添加到页面容器元素（例如网格布局、堆栈布局或其他）

或者，您可以使用数据绑定，并在获得 imageSource 后将其与您的视图模型绑定。

给出的例子：

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>

在 Nativescript 中，imageSource.fromUrl 的结果为 {"android":{}}

In Nativescript the result from imageSource.fromUrl is coming as {"android":{}}

android

nativescript