Фоновое изображение не отображается на странице NativeScript

Question

Я пытаюсь отобразить фоновое изображение на странице входа в систему, оно не отображается.

Я попытался добавить класс на страницу и свой макет. Ни один не работает.

Есть ли в моем коде что-то, что по какой-то причине препятствует этому?

<Page loaded="pageLoaded" class="page bgImage" actionBarHidden="true" xmlns="http://www.nativescript.org/tns.xsd">

    <FlexboxLayout class="page">
    <GridLayout rows="auto, auto, auto">
        <StackLayout class="form ">
            <Image class="logo" src="~/images/johnevolve.png" />
            <Label class="header" text="Health Conscious" />

            <StackLayout class="input-field">
                <Label text="Username" />
                <TextField class="input" text="{{ email }}" hint="Email"
                    keyboardType="email" autocorrect="false"
                    autocapitalizationType="none" returnKeyType="next" />
                <Label class="hr-light" />
            </StackLayout>

            <StackLayout class="input-field">
                <Label text="Password" />
                <TextField id="password" class="input" text="{{ password }}"
                    hint="Password" secure="true" returnKeyType="{{ isLoggingIn ? 'done' : 'next' }}" />
                <Label class="hr-light" />
            </StackLayout>

            <StackLayout class="input-field" visibility="{{ !isLoggingIn ? 'visible' : 'collapse' }}">
                <TextField id="confirmPassword" class="input" text="{{ confirmPassword }}"
                    hint="Confirm password" secure="true" returnKeyType="done" />
                <Label class="hr-light" />
            </StackLayout>

            <Button  text="{{ isLoggingIn ? 'Log In' : 'Sign Up' }}" tap="{{ submit }}"
                class="btn btn-primary m-t-20" />

            <Label visibility="{{ isLoggingIn ? 'visible' : 'collapse' }}"
                text="Forgot your password?" class="login-label" tap="{{ forgotPassword }}" />
        </StackLayout>
       </GridLayout>

        <Label class="login-label sign-up-label" tap="{{ toggleForm }}">
            <FormattedString>
                <Span text="{{ isLoggingIn ? 'Don’t have an account? ' : 'Back to Login' }}" />
                <Span text="{{ isLoggingIn ? 'Sign up' : '' }}" class="bold" />
            </FormattedString>
        </Label>
    </FlexboxLayout>


</Page>

и мой css:

.bgImage {

background-image: url("~/images/1-login.png");

}

Редактировать: вот правило css для страницы, если вам это нужно:

.page {
  align-items: center;
  flex-direction: column;
}

Кто-нибудь знает, что здесь происходит не так?

Спасибо.

Изображение в вопросе:

Answer 1

Возникла проблема с вашим FlexboxLayout.Он брал высоту 100% и перекрывал фоновое изображение с его содержимым.

Вы также можете попробовать добавить фоновое изображение в свой FlexboxLayout.

<FlexboxLayout class="page bgImage">

и в app.css

.bgImage{
    /* background-color: green; */
    background-image: url("~/images/1-login.png");
    background-repeat: no-repeat;
    background-size: cover
}

Я создал для вас игровую площадку здесь .

Answer 2

Если это NativeScript 5.x и вы используете HMR / Webpack;проблема, скорее всего, вызвана WebPack.У меня есть статья в блоге об этом, как отключить режим HMR и повторно использовать режим Legacy.

Короче говоря, вам нужно снова включить режим Legacy.http://fluentreports.com/blog/?p=935

Обратите внимание;это подходит только для NativeScript 5.x;NativeScript 6 (выйдет в ближайшее время), вероятно, не позволит вам повторно включить устаревший режим.

Если вы обнаружите, что устаревший режим действительно исправит вашу проблему;пожалуйста, сообщите об этой проблеме в репозиторий https://github.com/nativescript/NativeScript-Dev-Webpack, чтобы ее можно было просмотреть.