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

时间:2019-04-24 10:51:31

标签: ionic4

我正在尝试在离子含量中添加背景图像 这是我当前的代码:

#2

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

 <ul class="paralx-position">
                   <li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text-main">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1"  id="img1"  tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4"  tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
                   <li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
</ul>

它正在浏览器中工作,但是当我执行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 androidurl('../assets/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

6 个答案:

答案 0 :(得分:0)

打开scss文件:

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

答案 1 :(得分:0)

尝试更改路径,将图像保留在www / assets / img主文件夹中,然后进行设置

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

答案 2 :(得分:0)

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

如果您已设置路径,则只需输入../或./,路径就会自动提示

答案 3 :(得分:0)

由于使用的Ionic 4使用了所谓的Shadow DOM技术,因此只能使用变量访问某些元素,以便更改背景

ion-content {
 --ion-background: url('../asssets/...') !important; 
}

我非常确定上面的代码可以正常工作,以防万一它没有尝试删除android文件夹中的platforms文件夹,请再次构建它,这应该可以工作。

答案 4 :(得分:0)

没有机会使用离子含量解决此问题,所以我要做的是将离子含量更改为div,这解决了我的问题。在网络和Android设备上工作。

答案 5 :(得分:0)

您可以尝试更改图像网址,如下所示

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;
}

这对我有用。