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

Question

我正在尝试创建背景图片，但我似乎做不到。我查看了这个问题:

Nativescript background-image fullscreen

但没有任何运气。它没有显示足够的标记，而且那里的 OP 似乎没有使用 nativescript-angular因为当你使用 <Page></Page>按照建议你会得到一个错误。

和this issue说Page不应该与 Angular 一起使用，我很肯定我在文档中阅读了同样的内容。

我使用这个 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 文档所说的那样在应用根目录下创建一个名为 images 的文件夹。