NativeScript/NativeScript Angular - Wie wird ein Hintergrundbild für die Seite festgelegt?

Question

Ich versuche, ein Hintergrundbild zu erstellen, aber ich kann diese Frage nicht scheinen in der Lage zu sein, dies zu tun .. Ich sah:

Nativescript background-image fullscreen

Aber ohne Erfolg. Es zeigt nicht genug des Markups und auch das OP dort scheint nativescript-angular nicht zu verwenden, denn wenn Sie <Page></Page> wie vorgeschlagen verwenden, erhalten Sie einen Fehler.

Und this issue sagt, dass Page sollte nicht mit angular verwendet werden, und ich bin positiv, ich habe das Gleiche in der Dokumentation gelesen.

Ich benutze diese 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; 
} 

Mit dieser Vorlage:

<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> 

Das Bild ist bei app/assets/img/login.jpg. Irgendwelche Ideen, warum das nicht funktioniert?

Answer 1

Bei Component Login.ts:

import { Page } from "ui/page"; 

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

müssen einen Ordner im App root erstellen sagt namens Bilder wie die Nativescript docs.