我关注tjvantoll教程here关于使用NativeScript 1.7 + Angular 2开发应用程序。
我使用NativeScript Image Builder创建图像。我的自定义图片为" logo_login "并且NativeScript创建的默认图像是" 图标"。这是代码:
import {Component} from "angular2/core";
var imageSource = require("image-source");
var img = imageSource.fromResource("logo_login");
@Component({
selector: "myapp",
template: `
<StackLayout>
<Image src="res://icon" stretch="none" horizontalAlignment="center"> </Image>
<Button text="Sign in" id="submit-button" (tap)="submit()"></Button>
<Button text="Sign up"></Button>
</StackLayout>
`,
styleUrls: ["views/login/login-common.css", "views/login/login.css"]
})
export class AppComponent {
submit(){
console.log(img);
}
}
当我运行应用程序时, console.log(img)返回 null ,但 src =&#34; res:// icon&#34; < / strong>返回图标图片。
那么如何在使用NativeScript + Angular时修复自定义图像的使用?
答案 0 :(得分:2)
以下是一些如何通过Angular 2和NativeScript
动态加载图像的方法
import { Component, ViewChild, ElementRef, Injectable } from "angular2/core";
var imageSource = require("image-source");
var imgSrc = imageSource.fromResource("logo_login");
@Component({
selector: "myapp",
template: `
<StackLayout>
<Image #myImage stretch="none" horizontalAlignment="center"></Image>
<Button text="Change pic" (tap)="submit('res://logo_login')"></Button>
</StackLayout>
`
})
export class AppComponent {
// similar to getViewById
@ViewChild("myImage") myImageRef: ElementRef;
// logo_login.png from App_Resources/Android/drawable-hdpi, drawable-ldpi and drawable-mdpi
imgNativeSource = 'res://logo_login';
// logo_login.png from local app_folder
imgAppSource = "~/app_folder/logo_login"
// angular2 method triggers after view init
ngAfterViewInit() {
this.myImageRef.nativeElement.src = "res://icon";
}
// custom func with params
submit(source) {
this.myImageRef.nativeElement.src = source;
// this.myImageRef.nativeElement.src = this.imgNativeSource;
}
}
请注意,Android表示“位图图片.Android支持三种格式的位图文件:.png(首选),.jpg(可接受),。gif(不鼓励)。”但仍然是最好的特别是App_resources的选择是使用transperant png文件。
答案 1 :(得分:1)
我正在运行:tns livesync android --emulator --watch
并在此处退出问题:livesync synchonize images
所以只需要运行:tns run android