Wie können benutzerdefinierte Bilder als Ressourcen mit Nativescript und Angular 2 verwendet werden?

Question

ich nach dem tjvantoll Tutorial here über eine App mit 1,7 + Winkel 2.

Ich schaffe meine Bilder mit der Nativescript Image Builder nativescript zu entwickeln. Mein benutzerdefiniertes Bild ist "logo_login" und das Standardbild, das von nativescript erstellt wird, ist "Symbol". Hier ist der Code:

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); 
} 
} 

Wenn ich die Anwendung ausführen, console.log (img) Rückkehr null aber src = "res: // Symbol" Rück das Symbolbild.

Also, wie kann ich die Verwendung von benutzerdefinierten Bildern während der Verwendung der Nativescript + Angular 2 beheben?

Answer 1

Ich lief die: tns livesync android --emulator --watch und ein Problem Ausfahrt über das hier: livesync synchonize images

So laufen gerade benötigt: tns run android

Answer 2

Hier sind einige Möglichkeiten, wie Sie Ihre Bilder dynamisch über das Eckige 2 und 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; 
 
    } 
 
}

Beachten Sie, dass Android sagt "Ein Bitmap-Bild laden kann. Android unterstützt Bitmap-Dateien in drei Formate: .png (bevorzugt), .jpg (akzeptabel), .gif (entmutigt). "aber immer noch die beste Wahl speziell für App_resources ist die Verwendung von transperenten PNG-Dateien.