imageSource.fromUrlの結果は{"android"：{}}

Question

のようになります。https://docs.nativescript.org/cookbook/image-sourceのリンクをたどっている間、コンソールで、アンドロイドデバイスで結果を{"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を付けてから、

また、データバインディングを使用してimaageSourceを取得してビューモデルとバインドすることもできます（例：グリッドレイアウト、スタックレイアウトなど）。所与

例：

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>