利用 background-image: url('..

• 在小程序中为一个 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 传送门）

• 方式2的具体操作

1. 在 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};

2. 在使用的页面对应的 js 文件导入；

const Img2Base64 = require('../../constants/img2base64.js');

data: {
  homeBgArray: Img2Base64.homeBg, // 背景图片
},

3. 在 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>

4. 搞定！！！