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

開發微信小程序過程中將圖片放在本地文件夾里，然后使用

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