微信小程序在设置背景图片时,使用本地路径,手机预览无法显示。
首先检查图片的路径,是否有中文,都没有问题的时候,看插入背景图片格式采用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格式后就可以手机预览显示了。
总之:
- background-image 只能用网络url或者base64,本地路径的图片,手机预览不显示。
- 直接使用image标签可以加载本地图片。
更多推荐
微信小程序本地图片在开发工具显示手机预览不显示
发布评论