在做项目适合发现,想给一个css写入本地图片,图片很大并超过40k,需要转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/logo.png').then(data => {
        console.log(data);
        this.pageBg= data;							
    })
},

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

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

data() {
	return {
		// 背景图
		pageBg: '',
	}
},

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐