- 在小程序中为一个 view 设置一个背景图片，这很简单，在 html 中写过，信手拈来：
<view class='item' style="background-image: url('http://www.qqzhi.com/uploadpic/2014-10-14/160319405.jpg');">
</view>
- 简简单单就搞定了么，这有什么难的。什么？本地图片？说来就来：
<view class='membersCategory' style="background-image: url('../../imgs/cover.png');">
</view>
- 模拟器中显示正常，在手机上看看，编译N多遍，怎么还不显示！！！
- 对，小程序不支持本地图片作为 view 的背景，提供两种解决方案：①放服务器，加载网络图片；②将图片转成 base64 文件，然后使用（图片转 base64 传送门）
- 在 constants 目录下创建一个
img2Base64.js 文件，然后将转成的字符串复制粘贴成变量，然后导出使用：
const homeBg0 = 'data:image/png;base64, ...';
const homeBg1 = 'data:image/png;base64, ...';
const homeBg2 = 'data:image/png;base64, ...';
const homeBg3 = 'data:image/png;base64, ...';
const homeBg4 = 'data:image/png;base64, ...';
const homeBg = [homeBg0, homeBg1, homeBg2, homeBg3, homeBg4];
module.exports={homeBg};
- 在使用的页面对应的
js 文件导入；
const Img2Base64 = require('../../constants/img2base64.js');
data: {
homeBgArray: Img2Base64.homeBg, // 背景图片
},
- 在
xml 中使用；
<block wx:for="{{array}} " wx:for-index="index " wx:key="{{item}} " wx:for-item="item ">
<view class='membersCategory' style="background-image: url('{{homeBgArray[index%5]}}'); "></view>
</block>
- 搞定！！！
