小程序开发平台找哪家好,天津百度推广排名优化,宁波网络推广公司有哪些,广州网站定制开发参考博文#xff1a;uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法_javascript技巧_脚本之家
问题#xff1a;uniapp 开发微信小程序#xff0c;当使用本地图片作为 background-image 时#xff0c;真机无法显示
解决#xff1a;
方法一uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法_javascript技巧_脚本之家
问题uniapp 开发微信小程序当使用本地图片作为 background-image 时真机无法显示
解决
方法一
动态将本地图片转为base64
使用微信小程序自带转换方法wx.getFileSystemManager().readFileSync(img, base64) // 本地图片转为base64urlToBase64: (folder, fileName, format png) {let img /static/${folder}/${fileName}.${format}, base64Url // #ifdef MP-WEIXINlet imgBase64 wx.getFileSystemManager().readFileSync(img, base64)base64Url data:image/png;base64,${imgBase64}// #endifreturn base64Url || img}
在vue文件中调用 urlToBase64 方法这边默认图片都放在 static 文件夹下 方法二
手动将图片转为base64
图片在线转换工具链接
http://www.jsons.cn/img2base64/
https://tool.chinaz.com/tools/imgtobase
在静态资源文件夹下创建sass文件如 base64-img-store.scss
将转换后的base64编码放到对应url里样式变量名称可自行定义 在uni.scss文件中引入 base64-img-store.scss
import /static/css/base64-img-store.scss;
vue文件style langscss中使用
