NativeScript/NativeScript Angular - 如何爲頁面設置背景圖片？

我試圖創建一個背景圖像，但我似乎無法要能做到這一點。我看了一下這個問題：NativeScript/NativeScript Angular - 如何爲頁面設置背景圖片？

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。任何想法爲什麼這不起作用？

來源

2017-04-13 Chrillewoodz

您的代碼應該按預期工作，或者至少完全相同的場景在我的身邊工作 - 這裏是測試項目https://github.com/NickIliev/NativeScript-Issues-2017/tree/master/stackoverflow/backgroundImage –

您不能直接使用「頁面」，但可以通過編程方式。在組件的'ngOnInit'中，你可以'this.page.backgroundImage =「res：// login」' – jalal

在組件Login.ts：

import { Page } from "ui/page"; 

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

必須創建應用程序根目錄的文件夾命名相似圖片的Nativescript文檔說。

來源

2017-04-21 21:54:32

NativeScript/NativeScript Angular - 如何爲頁面設置背景圖片？

回答

相關問題