微信小程序本地背景图片手机不显示转base64正确的方法

由于小程序的限制,background-image不能引用本地图片,解决办法一是服务器拿图,二是本地图片转base64;

以下是本地图片转base64的方法:

wx.getFileSystemManager:创建文件管理类 
readFileSync:读取本地文件

点我=》官方FileSystemManagerAPI传送门

console.log(wx.getFileSystemManager().readFileSync('images/warnMMD/cover.png', "base64"))
注意地址引用不要../或者/的路径地址,也就是不需要相对路径和绝对路径,默认就是根目录起步;
不明白看看下面图片,是我的wepy目录结构。

wepy目录结构:

微信小程序本地背景图片手机不显示转base64正确的方法

 项目中实战用法:微信小程序本地背景图片手机不显示转base64正确的方法

大家可能注意到了data:image/png;base64是什么?

这是Data URI scheme。

Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。

在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

 点我=》data:image/png;base64是什么? 

 


综上手机页面也能显示本地背景图片了,就是不知道为啥会有这个报错,有明白的小伙伴记得给我留言哈!感激不尽!

微信小程序本地背景图片手机不显示转base64正确的方法