小程序引入背景图片不显示问题解决

小程序在css样式文件里面直接 background-image引入本地背景图是不生效的

.header{
width:100%;
height:420rpx;
background-image: url("/static/image/bg.jpg");
background-size: 100%;
background-color: red;
}
三种解决办法:

 1.将路径改成可以直接访问的绝对路径

background-image: url("http://pic20.photophoto.cn/20110902/0034034471873095_b.jpg");

2.直接用image标签代替样式背景图

mpvue写法:<img src="/static/image/code.jpg" alt="">
原生小程序:<image src='../image/code.jpg'></image>

3.直接在标签上写入样式

<div class="header" style="background-image: url('/static/image/bg.jpg')">
</div>

base64图片在线转换工具:
http://tool.chinaz.com/tools/imgtobase/

 


原文链接:https://blog.csdn.net/love_fish_dream/article/details/84644438

posted @ 2020-05-21 14:55  kpengfang  阅读(5568)  评论(0编辑  收藏  举报