我已经做了很长时间的小程序了，现在我选择用文章的方式来记录我遇到的问题以及问题的解决方案，也把我自己的一些经验分享给大家。 记录如下： 问题描述

在微信小程序中，当我们使用本地图片作为背景图片时，会涉及到以下问题。

代码：

.bg{ width: 750rpx; height: 540rpx; background-image: url(../../images/head_bg.png); }

小程序在页面使用该样式时会报错。

解决方案

小程序背景图片不能直接使用本地图片。 有4种解决方案：

使用组件，在布局下方放置一层图像。 缺点：布局结构可读性不太好。 通过在线转换网站将图像转换为格式。 缺点：内容太长，影响样式代码的阅读。

3、直接通过内联样式解决。 缺点：代码看起来不够优雅。 （最简单的）

4.直接使用在线图片。 缺点：需要放在服务器上。 （最灵活）

建议使用第四种方法来解决问题。 虽然第一次操作会有点麻烦，但是可以增加灵活性，可以直接替换远程镜像，无需发布版本。

如果公司有一台服务器来安装就太好了。 但是我们是独立开发，服务器怎么办？ 别忘了，其实我们可以把图片放到云开发的云存储中，就会自动生成在线图片链接。

放到云存储上，进入云开发控制台

进入云存储空间

将图片拖放到云存储空间，不勾选任何配置，点击确定即可上传成功。

点击文件名复制文件地址

CSS代码：

.head-bg{ width: 750rpx; height: 540rpx; background-image: url('https://xxxxxxxxxx.tcb.qcloud.la/head_bg.png'); background-size: 100% 100%; }

WXML代码

内联样式

当然，如果实际业务需求不需要替换图片，也可以使用第三种方案。 这是最无麻烦的选择。 代码如下所示：

编码格式

第二个选项，编码格式，首先将图片转换为编码。点击发送到图片在线转换工具

background-image:url('base64编码')

将图像与内容叠加

第一个选项是用内容覆盖图像

wxml代码

我是内容

wxss代码

.container{ width: 100%; height: 600rpx; margin: 0; padding: 0; position: relative; } image{ position: absolute; width: 100%; height: 600rpx; } .content{ position: absolute; z-index: 1; }

请点赞，我们会持续更新小程序开发相关的技术问题！