微信小程序本地背景图片手机不显示转base64正确的方法
由于小程序的限制,background-image不能引用本地图片,解决办法一是服务器拿图,二是本地图片转base64;
以下是本地图片转base64的方法:
wx.getFileSystemManager:创建文件管理类
readFileSync:读取本地文件
console.log(wx.getFileSystemManager().readFileSync('images/warnMMD/cover.png', "base64"))
注意地址引用不要../或者/的路径地址,也就是不需要相对路径和绝对路径,默认就是根目录起步;
不明白看看下面图片,是我的wepy目录结构。
wepy目录结构:
项目中实战用法:
大家可能注意到了data:image/png;base64是什么?
这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
综上手机页面也能显示本地背景图片了,就是不知道为啥会有这个报错,有明白的小伙伴记得给我留言哈!感激不尽!