離子設備瀏覽器的區別

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