如何使用自定义图像作为 NativeScript 和 Angular 2 的资源？答案

【问题标题】：How to use custom images as resources with NativeScript and Angular 2?如何使用自定义图像作为 NativeScript 和 Angular 2 的资源？
【发布时间】：2019-04-04 00:00:14
【问题描述】：

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

我使用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) 返回 null 但 src="res://icon" 返回图标图像。

那么在使用 NativeScript + Angular 时如何解决自定义图像的使用问题？

【问题讨论】：

嗯，你确实意识到这是两个独立的资源。 res://icon 不是 logo_login。您的 app_resource/android 文件夹/* 文件夹中是否真的有一个不同大小的 logo_login.png 文件？
嗨纳撒尼尔！ res://icon 是现在工作的一个例子，当我尝试 res://logo_login 时，我什么也没看到。是的，我将它放入 app_resource/android 文件夹中。我用官方工具（原生镜像生成器）生成它
1.那么你确定你在每个的 drawable-?dpi 文件夹中有一个 logo_login.png 文件吗？ 2. 你试过“res://logo_login.png”吗——我似乎记得目前需要.png 后缀的两个平台之一。（在即将发布的 2.0 中修复）
我还测试了你的场景，它与 logo_login 一起工作没有问题（正如 Nathanael 提到的 - youlogo_login 文件必须存在） - 在提交时，它会返回 [object Object] 并加载 res 时： //logo_login 它也渲染

标签： android angular nativescript

【解决方案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 文件。

【讨论】：

从本地文件夹中获取图像有效！ // 来自本地 app_folder 的 logo_login.png imgAppSource = "~/app_folder/logo_login"
我如何访问raw 文件夹中的mp3 文件？每个人都在谈论drawables文件夹。但是二进制文件呢？我怎样才能访问它？也在这里问：discourse.nativescript.org/t/folder-location-problem/3304

【解决方案2】：

我正在运行：tns livesync android --emulator --watch和一个关于这里的问题退出：livesync synchonize images

所以只需要运行：tns run android

【讨论】：