Question

我的Ionic应用程序都已设置完毕，但是，它在浏览器中的功能并不像...例如，背景图片无法加载。有谁知道为什么？

所有内容（包括应用与之通信的API）都存储在本地

以下是视图：

<ion-view title="Login" id="page2" hide-back-button="true" hide-nav-bar="true">
    <ion-content overflow-scroll="false" padding="true"
                 style="background: url('../img/loginBackground.jpg') no-repeat center;background-size:cover;">
        <form class="list">

            <style scoped>
                .inputCustom{
                    background-color: rgba(255,255,255,0.8);
                }

                .imgBack{
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    overflow: visible;
                    min-width: 60vw;
                    max-height: 60vw;
                    max-width: 60vw;
                }
            </style>


            <img src="../img/logo.gif" class="imgBack">

            <div class="spacer" style="height: 60px;"></div>

            <ion-list>
                <label class="item item-input inputCustom">
                    <span class="input-label">E-mail</span>
                    <input type="email" placeholder="" ng-model="user.email">
                </label>
                <label class="item item-input inputCustom">
                    <span class="input-label">Lozinka</span>
                    <input type="password" placeholder="" ng-model="user.password">
                </label>

                <div class="animated flash" ng-show="validationBool"
                     style="text-align: center; padding-top: 5px; color: indianred">{{validationError}}
                </div>

            </ion-list>
            <div class="spacer" style="height: 40px;"></div>
            <a ng-click="signIn()" id="login-button1" class="button button-positive  button-block">Prijavi se</a>
            <a ui-sref="signup" id="login-button2" class="button button-positive  button-block button-clear">Nemaš račun? Registriraj se</a>
        </form>
    </ion-content>
</ion-view>

Answer 1

我在这里理解的是你在离子中显示图像时出现问题。所以这是解决方案。代码中存在问题

background: url('../img/loginBackground.jpg')

你没有为你的形象提供正确的网址。这一定是这样的。

background: url('/img/loginBackground.jpg')

注意：没有点，您的图片会出现在“www / img”中同样适用于 img标记。

修改
试试这个

.scroll-content { background:url(/img/loginBackground.jpg) no-repeat center; background-size: cover;

和从离子内容中删除样式bavckground。

Answer 2

我发现前面的斜线导致了问题。正确的路径是

<ion-content overflow-scroll="false" padding="true"
                 style="background: url(img/loginBackground.jpg) no-repeat center;background-size:cover;">

对于徽标：

<img src="img/logo.gif" class="imgBack">

离子设备浏览器的区别

2 个答案: