离子背景图像未显示在设备上

Posted 2023-03-06

【中文标题】离子背景图像未显示在设备上

【英文标题】：Ionic background-image not showing on device

【发布时间】：2015-06-21 23:48:09

【问题描述】：

我在我的 Ionic 应用程序的页面上设置了一个自定义类 .auth-pane，以便使用自定义背景对其进行样式设置。

背景的 CSS 是...

.auth-pane 
  background-image: url("../img/auth-background.jpeg");
  background-position: center;
  background-repeat: no-repeat;

适用于<ion-view view-title="Auth" class="auth-pane">

在 Chrome 中一切正常（使用 ionic serve），但是当我在设备上构建和运行时，我看到的只是纯白色背景。

我尝试将背景图片的路径调整为 img/auth-background.jpeg 和 /img/auth-background.jpeg，两者都没有任何区别（尽管绝对路径也适用于 Chrome）。

没有抛出与图像文件相关的错误（404 等），因此似乎正在找到该文件。

【问题讨论】：

@jakehallas：添加background-size 没有帮助

您是否碰巧找到了解决此问题的方法？如果您有同样的问题，请发布答案

【参考方案1】：

试一试，它对我的​​ Ionic 项目非常有效：

.auth-pane 
    background: url(../img/auth-background.jpeg) no-repeat center center fixed; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;

【讨论】：

感谢您的建议！这在技术上确实有效，但我无法更改大小。如果设置为 100% 以外的任何值，则图像将不会显示在移动设备上。使用 100% 时，如果视口太窄，图像会缩小并最终在顶部和底部出现白色信箱。

【参考方案2】：

试一试对我来说非常有用。

.scroll-content
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

【讨论】：

在 ionic-lab 中以及当我在 android 设备中运行它时没有设置背景。它对你有用吗？我正在使用最新版本的 ionic 2 和 angular JS 1。

我还没有用 ionic 2 测试过这个，但我很确定不可能使用 ionic 2 和 angular 1 ***.com/questions/35955053/…

@MohamedSelim 很高兴这对你有用，如果你觉得这有帮助，点赞会很好;)

【参考方案3】：

我遇到了同样的问题，我尝试了很多选项，包括背景大小，但最后我奇怪地通过向我的容器中添加一些空内容来解决它，如下所示：

<span class="auth-pane">
      <span></span>
</span>

【讨论】：

不确定这是否能长期解决您的问题。当图像未在 ionic it/​​s 中显示时，主要是因为您需要提及图像的宽度和高度。

【参考方案4】：

我在使用 Ionic2 时遇到了同样的错误，但我的其他图像出现了。 我必须缩小图像的大小才能使其正常工作。我不确定这是否是已知限制。

【讨论】：

谢谢:) 为我节省了几个小时的挠头！！这需要在 Ionic 中记录！

真的是这样吗？？任何人都对此给出了确切的解决方案。

【参考方案5】：

阻止它在ionic2中显示的不是图像的大小。这是本地图像不显示时应该做的：

删除您的图像文件夹或图像名称之前的尾随 ../。应用程序已经知道所有图像默认存储在 www 文件夹中。因此，您必须使用这样的格式来显示所有图像： 冷杉图标： 和 用于背景image '

【参考方案6】：

.auth-pane 
   background: url('../img/image_name.jpg') no-repeat top;
  background-size: 100% 200px;

增加适合你的高度

【参考方案7】：

.imgOFF 
  background: url(../assets/img/light/off.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;


.imgON 
  background: url(../assets/img/light/on.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
  border-bottom: 4px solid black;

<ion-item>
  <ion-toggle color="royal" checked="false" [(ngModel)]="light1"></ion-toggle>
  <ion-label>
    Light 1
  </ion-label>
  <ion-icon item-start>
    <img *ngIf="light1" class="imgON">
    <img *ngIf="!light1" class="imgOFF">
  </ion-icon>
</ion-item>