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

如果这是NativeScript 5.x，并且您正在使用HMR / Webpack；问题很可能是WebPack引起的。我有一篇关于此的博客文章，介绍如何禁用HMR模式和重新使用传统模式。

简而言之，您需要重新启用传统模式。 http://fluentreports.com/blog/?p=935

请注意；这仅与NativeScript 5.x有关； NativeScript 6（即将推出）可能不会让您重新启用旧版模式。

如果您发现传统模式确实可以解决您的问题；请将此问题报告给https://github.com/nativescript/NativeScript-Dev-Webpack存储库，以便进行查看。

Answer 2

您的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
}

我为您here创建了一个游乐场。

背景图像未显示在NativeScript页面上

2 个答案: