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


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

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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM