背景圖片在編輯器中可以展示,但是手機(jī)預(yù)覽時(shí)無(wú)法顯示访递。
原因
:小程序背景圖片只可以展示base64或者網(wǎng)絡(luò)地址圖片晦嵌,背景圖片如果使用路徑地址,電腦開(kāi)發(fā)時(shí)可以正常顯示拷姿,手機(jī)測(cè)試時(shí)無(wú)法顯示背景圖惭载。
解決方法
:使用"wx.getFileSystemManager().readFileSync(file_address,encoding)"進(jìn)行轉(zhuǎn)碼(感謝地址的博主:https://blog.csdn.net/qq_36875339/article/details/81086205)
<!-- index.wxml -->
<view class='container'>
<!-- 主體內(nèi)容 -->
<view class="body_level" style="background:url({{background}});">
<view class="logo_robot" >
<image src='{{logo_robot}}'></image>
</view>
</view>
</view>
//index.js
Page({
data: {
"background" : "/images/mipmap-hdpi/backgr.png", //背景圖片
"logo_robot": "../../../images/mipmap-hdpi/logo-robot.png",
},
onLoad: function () {
var that = this;
let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');
that.setData({
'background': 'data:image/jpg;base64,' + base64
});
},
})