微信小程序 background-image的图片真机调试和体验版中无法加载

前言

在我的微信小程序项目中,我一般在引用静态本地资源时用相对路径，然后我就碰到一个坑：我在给一个view添加背景图时，本地查看效果正常，但是使用真机调试或者体验版查看是加载不出来的。

原先代码

<view style="background-image:url("../../images/pics/bg_img.png')">
</view>

解决方案

说明:注意不要以/开头，不然也加载不出来,图片名最好不要用中文，否则可能也加载不出来。

<view style="background-image:url("images/pics/bg_img.png')">
</view>

扩展

在wxss中图片使用本地路径会报错，解决方案是转换成bas64编码。
我这里建议：要使用背景图片时尽量把图片转成base64编码,在wxss里面添加背景图，这里提供一个网址用于转换图片base64编码：http://tool.chinaz.com/tools/imgtobase。