微信小程序背景图片不显示

最新推荐文章于 2025-07-03 11:18:20 发布

原创最新推荐文章于 2025-07-03 11:18:20 发布 · 1.6w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序背景图片

微信小程序专栏收录该内容

1 篇文章

订阅专栏

最近学着写了一个微信小程序，可是总是是加载不出背景图片。这里先描述一下问题。
用下面这种办法声明的背景图片在本机和手机上都无法显示。
.container {
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
box-sizing: border-box;
background-image: url(‘../assets/image/bg.png’);
background-repeat: repeat;
padding-top: 30rpx;
}
用下面这种样式行的本地图像加载方法可以在本地预览加载出背景图片
只需要在url里面填入路径即可。
但是这种办法在手机端还是无法显示背景图片。
< view class=”container” style=’background-image:url(../assets/image/bg.png)’>
网上的人都建议用网络图片，可是我又没有网站也没有服务器，不能加载图片。这里有一种办法使用网络图片。我们都有QQ，可以把图片上传到QQ空间进行访问。
首先就需要把背景图片上传到空间相册。
然后打开图片，右键弹出一个选项窗口，点击复制图片地址。
这里写图片描述
把图片地址粘贴到url里，这样手机使用小程序的时候就有背景图片了。
但是这种方法本地预览的时候没有背景图片。
http://m.qpic.cn/psb?/V12rAd1F2vXe1y/YPNpbVIQaMUzAy5esfNsuqrL.b11CQcy9MC3Z0Rnrmk!/b/dDABAAAAAAAA&b)’>