NativeScript/NativeScript Angular - 如何为页面设置背景图片？

Question

我试图创建一个背景图像，但我似乎无法要能做到这一点。我看了一下这个问题：

Nativescript background-image fullscreen

，但没有任何运气。它没有显示足够的标记，而且OP似乎也没有使用nativescript-angular，因为当您按照建议使用<Page></Page>时会出现错误。

和this issue表示Page不应该与角度一起使用，而且我很积极我在文档中阅读过相同的内容。

我使用这个CSS：

.login-page { 
    width: 100%; 
    height: 100%; 
    padding: 40px 60px; 
    background-image: ~/assets/img/login.jpg; 
    background-position: 50% 50%; 
    background-size: cover; 
    background-color: blue; 
} 

有了这个模板：

<StackLayout class="login-page text-center" orientation="vertical" [formGroup]="loginForm"> 
    <StackLayout class="input-field m-b-20"> 
    <TextField class="input input-rounded" formControlName="email" hint="Email"></TextField> 
    </StackLayout> 
    <StackLayout class="input-field"> 
    <TextField class="input input-rounded" formControlName="password" hint="Password" secure="true"></TextField> 
    </StackLayout> 
</StackLayout> 

的图像是在app/assets/img/login.jpg。任何想法为什么这不起作用？

Answer 1

在组件Login.ts：

import { Page } from "ui/page"; 

export class LoginComponent { 
    constructor(private page:Page) { 
    page.backgroundImage = '~/images/login.jpg'; 
    } 
} 

必须创建应用程序根目录的文件夹命名相似图片的Nativescript文档说。