首页 文章

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

提问于
浏览 次
0

我正在尝试创建一个背景图片，但我似乎无法这样做..我看了这个问题：

Nativescript background-image fullscreen

但没有任何运气 . 它似乎没有使用 nativescript-angular ，因为当你按照建议使用 <Page></Page> 时会出现错误 .

并且this issue说 Page 不应该't be used with angular, and I' m我在文档中读过同样的东西 .

我用这个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 . 任何想法为什么这不起作用？

css nativescript nativescript-angular

1 回答

  • 1

    在Component Login.ts ：

    import { Page } from "ui/page";

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

    必须在app根目录下创建一个名为images的文件夹，就像Nativescript文档所说的那样 .

    回复于

相关问题