uniapp将微信小程序运行到真机调试 ———本地图片不显示的问题

在image组件中使用相对路径加载本地图片资源，在微信开发者工具里面正常显示，但使用真机调试却无法显示。

看了这个大佬的文章发现原因所在。

uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法_uniapp使用本地图片-CSDN博客

总的来说就是真机调试不支持相对路径，要么使用http网络图片，要么将本地图片转换成base64图片。

然后使用了这位老哥封装的代码，发现真机和微信开发者工具都无法显示了。

然后将使用代码转换的base64和使用在线图片转base64网站转换的对比了一下，发现问题。

这里的data:image/png写死了，所以把这段代码稍作修改。

/**
 * 获取本地图
 * @param folder // 文件夹名字 如 /static/images/home
 * @param fileName // 文件名 如 home-bg
 * @param format // 文件类型 如 png jpg
 * @returns {*|string}
 */
 
// #ifdef MP-WEIXIN
const urlTobase64 = (folder, fileName, format) => {
  let img = `/static/${folder}/${fileName}.${format}`,
    imgBase64 = wx.getFileSystemManager().readFileSync(img, "base64"),
    base64Url = `data:image/${format=='svg'?'svg+xml' : format};base64,${imgBase64}`;
  return base64Url;
};
// #endif

之后真机成功显示出svg图标和png图片。

最后感谢大佬的启发！