当前位置：首页 > article >正文

解决 uniapp 开发微信小程序不能使用本地图片作为背景图问题

article 2024/11/17 23:29:16

参考博文：uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法_javascript技巧_脚本之家

问题：uniapp 开发微信小程序，当使用本地图片作为 background-image 时，真机无法显示

解决：

方法一：

动态将本地图片转为base64

使用微信小程序自带转换方法wx.getFileSystemManager().readFileSync(img, 'base64')

	// 本地图片转为base64
	urlToBase64: (folder, fileName, format = 'png') => {
		let img = `/static/${folder}/${fileName}.${format}`, base64Url = ''
		// #ifdef MP-WEIXIN
		let imgBase64 = wx.getFileSystemManager().readFileSync(img, 'base64')
		base64Url = `data:image/png;base64,${imgBase64}`
		// #endif
		return base64Url || img
	}

在vue文件中调用 urlToBase64 方法，这边默认图片都放在 static 文件夹下

方法二：

手动将图片转为base64

图片在线转换工具链接：

http://www.jsons.cn/img2base64/

https://tool.chinaz.com/tools/imgtobase

在静态资源文件夹下创建sass文件，如 base64-img-store.scss

将转换后的base64编码放到对应url里，样式变量名称可自行定义