微信小程序 使用本地图片做背景图，展示不出来

开发微信小程序过程中将图片放在本地文件夹里，然后使用

background: url(图片路径);

来使用，出现一个问题，就是没有正常展示出来，一开始感觉是路径错误，经过检查之后发现没错。

 

解决的方法是将图片素材做一个base64转码再使用，举例

data:{
    backgroundPng: ""  
}

onLoad: function(option){
let base64Png = wx.getFileSystemManager().readFileSync("本地图片路径", 'base64');

this.setData({
      backgroundPng: 'data:image/jpg;base64,' + base64Png 
    })
}

界面上使用data里处理好的就可以了。

 

但是有一个小问题是使用了这个背景图的dom，padding等样式会有失效的现象。

建议提前在子级dom做padding