uniapp将图片转化为base64格式

　康　

已于 2024-04-03 09:12:42 修改

阅读量7.6k

点赞数 3

分类专栏： uniapp 微信小程序文章标签： uni-app vue

于 2023-03-10 16:33:40 首次发布

本文链接：https://blog.csdn.net/qq_40047019/article/details/129445386

版权

uniapp 同时被 2 个专栏收录

38 篇文章 5 订阅

订阅专栏

微信小程序

33 篇文章 2 订阅

订阅专栏

当在uniapp项目中，发现CSS引用的本地图片因大小超过40k而无法正常加载时，可以使用image-tools插件将图片转为base64格式。通过npm安装image-tools，然后在代码中导入并使用pathToBase64方法将图片转换，再将base64数据应用到CSS背景中。在template中设置背景样式，从而解决图片引入问题。

摘要由CSDN通过智能技术生成

在做项目适合发现，想给一个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: '',
	}
},