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

在Component Login.ts ：

import { Page } from "ui/page";

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

必须在app root上创建一个名为images的文件夹，就像Nativescript文档所说的那样。

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

1 个答案: