uniapp将图片转化为base64格式

为什么uniapp项目css引入的本地图片不能超过40k?
1、下载image-tools插件并安装

npm i image-tools --save-dev

2、引入image-tools

import { pathToBase64, base64ToPath } from 'image-tools'

3、将图片转换成base64格式

created() {
    // 图片转化为base64格式
    pathToBase64('/static/image.png').then(data => {
        console.log(data);
        this.pageBg= data;                            
    })
},

4、然后return一下数据，把背景css写入html上即可。
 

<template>
    <view :style="'background: url('+backImg+') no-repeat center center;background-size: cover;'">
    </view>
</template>

<script>
  data() {
    return {
      // 背景图
      backImg: '',
    }
  },
</script>

最后附加一个微信小程序图片转base64

funcation base64Image(value) {
    // #ifdef MP-WEIXIN
	const fsm = wx.getFileSystemManager();
	let extName = value.match(/data\:\S+\/(\S+);/);
	if (extName) {
		extName = extName[1];
	}
	let fileName = Date.now() + '.' + extName;
	return new Promise((resolve, reject) => {
		let filePath = wx.env.USER_DATA_PATH + '/' + fileName;
		fsm.writeFile({
			filePath,
			data: value.replace(/^data:\S+\/\S+;base64,/, ''),
			encoding: 'base64',
			success: (res) => {
				resolve(filePath);
			},
		});
	});
	// #endif
}