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

Question

我正在尝试在我的 ion-content 中添加背景图片这是我当前的代码：

ion-content{
    --background: none;
    background-image: url('/assets/images/home-background.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

我也尝试了以下但同样的事情发生了。

ion-content{
    --background: url('/assets/images/home-background.png')  no-repeat center center / cover;
    text-align: center;
}

它在浏览器中工作，但当我这样做时 ionic cordova run android，背景图像不显示。我还尝试将 url 更改为 url('../assets/images/home-background.png')、url('./assets/images/home-background.png') 和 url('../images/home-background.png')，但它给了我错误。

I tried to check it and debug it and maybe this can help, I clicked the url and it brings me to the resources which shows me the image

In this second image, I saw the home-background.png

Answer 1

打开 scss 文件：

ion-content {
    background: url('../../assets/img/myBg.jpg') center bottom no-repeat;
    background-size: 100%; 
}

Answer 2

尝试更改将图像保存在主 www/assets/img 文件夹中的路径，然后设置

background-image: url('assets/img/home-background.png');

Answer 3

背景图像：url('..assets/img/home-background.png');

如果您设置了路径，只需键入 ../ 或 ./ 自动路径将建议

Answer 4

没有机会使用 ionic-content 解决这个问题，所以我所做的是将 ionic-content 更改为 div，它解决了我的问题。在网络和 android 设备上工作。

Answer 5

您可以尝试更改图像url，如下所示

ion-content{
--background: none;
background-image: url('../../assets/images/home-background.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}

这对我有用。

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

ionic 4 ion-content background-image not showing on device

ionic4