在PC端，给页面添加本地背景图片的写法为：
background-image: url("../images/local_image.png");
在微信小程序端则不能通过这种方式来操作，官方建议我们使用 base64 或 image 标签，或者网络图片来解决。
1.base64方式
首先需要将背景图片使用编码base64进行转换，网址如下：
http://tool.chinaz.com/tools/imgtobase/
转换完成后会生成对应的编码文本：
之后在对应的wxss文件中引用：
background-image: url("转换后的编码文本")
会发现这个文本超级长，而微信对包的大小是有限制的，多几个背景图片引用，包大小会容易超限。
2.image 标签方式
利用流布局，给z-index设置层级，将 image 标签置于底层：
wxml:
<view class='background'>
<image class='background-image' src='../images/back.png'></image>
<view class='background-content'>
<view background-size="cover">
这里是一段文本
</view>
</view>
</view>
wxss:
.background {
display: flex;
flex-direction: column;
}
.background-image {
width: 100%;
height: 500px;
}
.background-content {
position: absolute;
z-index: 1;
}
这种方式同样存在问题，如果图片较大，包大小同样会超限，所以，个人认为最好的方式就是通过网络图片来设置背景。
3.网络图片
使用的网络图片不用担心包大小的问题了，但是图片太大仍会导致加载慢，影响体验效果。
扫描二维码关注公众号，回复：
12466828 查看本文章
所以我们可以用PS工具缩小图片尺寸，同时还可以对图片进行压缩。
压缩图片的工具：
https://www.bejson.com/ui/compress_img/
选择图片压缩率，尽量让图片大小满足要求又不失真：
压缩完成后，将图片上传到服务器的指定路径下，就可以通过链接访问图片。
1. 基本方式
wxml：
<view class="sum-text" style="background-image: url('http://127.0.0.1/download?fileUrl=images/back.png')"></view>
生产环境，开发环境的路径配置有时是不一样的，所以这里我们也可以传变量。
2. 传变量方式
wxml:
<view class="sum-text" style="background-image: url({
{sumImage}})"></view>
js:
// 导入公共全局变量，里面配置了base_url参数，指定了访问路径
import {
config
} from "../../../config.js";
data: {
sumImage: config.base_url + '/download?fileUrl=images/back.png'
}
小程序遇到包大小超出限制时，可以首先检查下是否有过大的图片，采用处理成网络图片的方式就可以快速解决这个问题。
欢迎关注我的公众号，用讲故事的方式学技术。
这里有脑洞大开的奇葩故事，也有温暖文艺的心灵感悟。
技术知识，也可以很有趣。
