离子设备浏览器区别答案

【问题标题】：Ionic device browser difference离子设备浏览器区别
【发布时间】：2016-09-04 04:00:28
【问题描述】：

我的 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>

【问题讨论】：

你的代码在哪里？
因为这是一个奇怪的问题，我不知道该粘贴什么？视图、控制器，一切？
现在将代码粘贴到您使用背景的位置，它在模拟器或移动设备上运行良好吗？
这里，已编辑。它在浏览器中正常工作
您的文件夹结构是什么样的？ “img”文件夹在“www”文件夹中，对吗？ logo.gif 是否显示？

标签： mobile ionic-framework device

【解决方案1】：

我在这里的理解是，您在 ionic 中显示图像时遇到问题。所以这是解决方案。您的代码中的问题在这里

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。

【讨论】：

当我这样说时，它在 IDE 中显示“无法解析目录”。但它仍然显示在浏览器中，但设备上没有任何变化
好吧，我不知道其他一切是否正常，因为我的设备无法与本地主机通信。我现在注意到，如果我将路径更改为 /www/img/loginBackground.jpg，IDE 会显示它没问题，但浏览器会显示我在设备上看到的相同图像（或没有图像）......

【解决方案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">

【讨论】：