Question

我关注tjvantoll教程here关于使用NativeScript 1.7 + Angular 2开发应用程序。

我使用NativeScript Image Builder创建图像。我的自定义图片为＆＃34; logo_login ＆＃34;并且NativeScript创建的默认图像是＆＃34; 图标＆＃34;。这是代码：

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时修复自定义图像的使用？

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的选择是使用transperant png文件。

Answer 2

我正在运行：tns livesync android --emulator --watch并在此处退出问题：livesync synchonize images

所以只需要运行：tns run android

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

2 个答案: