微信小程序本地图片在开发工具显示手机预览不显示

微信小程序在设置背景图片时，使用本地路径，手机预览无法显示。

首先检查图片的路径，是否有中文，都没有问题的时候，看插入背景图片格式采用background-image：

即：

<view class="content" style="background-image:url('../static/11.png')">

background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

1.直接使用image标签

<image class='userBg' src='../../../images/my_bg.jpg'></image>

直接使用image标签加载本地图片。

2.背景图片background-image需要修改格式

在微信小程序中插入背景图片，是不能将本地文件直接作为background-image的，要么使用网址链接，要么使用base64，这考虑到小程序的大小问题，毕竟大小限制为2M的小程序是不可能有多余的空间留给background-image的。

(1) 复制图片链接

往上下载图片的时候可以直接复制图片链接。

(2) 文件格式转化为base64

1)手动转：

打开base64图片在线转化工具，上传图片，右边的框内会显示图片的base64码，复制到代码中，比较长。

2)小程序转化：

直接用readFileSync进行编码转化。

将图片本地路径转为base64图片格式（​wx.getFileSystemManager().readFile）

//先获取文件管理器
const fileManger = wx.getFileSystemManager()
//调用文件管理器的一个读取文件内容方法
   fileManger.readFile({
//图片路径
     filePath:imgurl,
//图片转换的编码格式
     encoding: base64,
     success:res=>{
       
     }

转换成base64时要注意不能直接用路径要加base64前缀"data:image/png;base64,"

let image_to_base64 = function(img){
    return new Promise(((resolve, reject) => {
        wx.downloadFile({
            url: img,
            success(res) {
                wx.getFileSystemManager().readFile({
                    filePath: res.tempFilePath, //选择图片返回的相对路径
                    encoding: 'base64', //编码格式
                    success: res => { //成功的回调
                        resolve('data:image/png;base64,' + res.data)
                    }
                })
            }
        })

    }))
}

转换为base64格式后就可以手机预览显示了。

总之：

1. background-image 只能用网络url或者base64，本地路径的图片，手机预览不显示。
2. 直接使用image标签可以加载本地图片。