Ionic 2 - 向页面添加背景图像答案

【问题标题】：Ionic 2 - Adding a background image to a pageIonic 2 - 向页面添加背景图像
【发布时间】：2016-11-28 16:38:40
【问题描述】：

我刚刚安装了一个新的 Ionic 项目 - Ionic v2.0.0-beta.32

我希望在全新安装的主页上添加背景图片，有没有人可以告诉我如何处理这个问题？我能找到的只是 Ionic 1 的信息，但情况似乎完全不同。

根据我的发现，图片需要如下尺寸

2800px x 2800px

但除此之外我找不到任何其他教程。

这是我的第一个 Ionic 项目，所以要温柔

谢谢大家

【问题讨论】：

【解决方案1】：

对于 Ionic V4，他们在 scss 文件中使用了一些新开关。这对我有用：

ion-content {
  --background: url('../../assets/Welcome-screen.png')  no-repeat 50% 10%;
}

【讨论】：

【解决方案2】：

图片可以是任意大小。

转到app/theme/app.core.scss并添加以下代码

ion-content{
    background-image: url('img/background.jpg');
}

这是假设您的图像文件的名称是 background.jpg 并存储在 www/img/ 文件夹中。

希望对你有帮助

更新离子 3.x

转到app/app.scss并添加以下代码

ion-content {
    background-image: url('assets/img/background.jpg');
}

这是假设您的图像文件的名称是background.jpg 并存储在assets/img 文件夹中。

【讨论】：

为我工作，稍作修改ion-content{ background-image: url('../img/background.jpg'); } 这是因为编译的 html 文件在 www/build 而图像在 www/img
注意相对路径，对我来说有效../../assets/imgs/mymage.jpg

【解决方案3】：

在 ionic 2 中，仅当您将 img 文件夹放入 build 文件夹时，背景图像才有效。如果你去检查法师 url，它会告诉你我在 build/img/bg.jpg 中找到它，尝试将文件夹 img 放入 build 文件夹。

www/build/img

【讨论】：