如何将自定义图像用作 NativeScript 和 Angular 2 的资源？

Question

我正在关注 tjvantoll 教程 here 关于使用 NativeScript 1.7 + Angular 2.

开发应用程序

我使用 NativeScript Image Builder 创建图像。我的自定义图像是“logo_login”，NativeScript 创建的默认图像是“icon”。这是代码：

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)returnnull但是src="res://icon" return 图标图片。

那么如何在使用 NativeScript + Angular 时修复自定义图像的使用？

Answer 1

以下是一些通过 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 是使用透明的 png 文件。

Answer 2

我正在运行宁：tns livesync android --emulator --watch这里有一个问题退出：livesync synchonize images

所以只需要运行 : tns run android

如何将自定义图像用作 NativeScript 和 Angular 2 的资源？

How to use custom images as resources with NativeScript and Angular 2?

android

nativescript

angular