在前端开发中，我们经常需要加载并处理图片，而对于小图片，我们可以将其转换为 base64 编码直接在页面中渲染，减少浏览器请求次数，提高用户访问速度。在使用 wepy 开发小程序时，可使用 npm 包 wepy-plugin-image2base64 来实现自动转换小图片为 base64 格式。
插件介绍
wepy-plugin-image2base64 是一款轻量级的 wepy 插件，主要用于将小图片自动转换为 base64 格式，并替换其原有路径，以加快页面加载速度。在此基础上，我们还可以设置文件大小限制、排除特定路径等功能。
安装使用
安装 wepy-plugin-image2base64：
npm install wepy-plugin-image2base64 --save-dev
在 wepy.config.js 中添加插件配置参数：
-- -------------------- ---- ------- ----- ---------------------- - ------------------------------------ -------------- - - -------- - ------------------------ -- ------------ -------- ---- - ------ ---- ------ ---- - ---- - -- -- -------------- -------- --------------- --- -- --在页面或组件中使用小图片，如：
<template> <img src="../assets/image/icon.png" alt="图标" /> </template>
在编译后的代码中，会将以上代码转换为：
<template> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAAAAAP///wAAAAAA//8AAAAAAAAAAAAAAAAAAAAAAAAAAAD/AABHIHJeAAAAwklEQVR4nO3OIQEAAAjAMOxEHM7EzyC/C//MkMQCCsRAEchAAFIEAIchxxAAAgQgAIQchxxAAAgQgAIQchxxAAAgSgAIRchRwAAgSgAIRchRwAAgSgAIRchRwAAhBwAACGEbqIEAAAiCgAISG5ogQAAIQciAAiCgAISG5ogQAAIQciAAiCgAISF5AAiCgAISF5AAjwLpU6okpwU6AAAAABJRU5ErkJggg==" alt="图标" /> </template>
插件配置参数说明
limit
- 类型：Number
- 默认值：1024 * 1024
- 描述：设置文件大小限制，单位为 byte，默认为 1MB。
exclude
- 类型：RegExp
- 默认值：/node_modules/
- 描述：排除特定路径，使用正则表达式。
注意事项
- 只能自动转换小图片（小于 limit），超过 limit 大小的图片不会转换为 base64。
- 该插件会修改原有路径，需要注意路径是否正确。
- 在开发模式下，插件不会对图片进行转换，需要进行构建后才能生效。
延伸学习
- base64 编码是如何生成的？
- wepy 插件的开发方法及原理是什么？
- 如何使用 wepy-plugin-image2base64 优化页面加载速度？
示例代码
wepy.config.js：
-- -------------------- ---- ------- ----- ---------------------- - ------------------------------------ -------------- - - -------- - ------------------------ ------ ---- - ---- - -- -------- --------------- --- -- --page.wpy：
<template> <img src="../assets/image/icon.png" alt="图标" /> </template>
构建后的 page.wpy：
<template> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAAAAAP///wAAAAAA//8AAAAAAAAAAAAAAAAAAAAAAAAAAAD/AABHIHJeAAAAwklEQVR4nO3OIQEAAAjAMOxEHM7EzyC/C//MkMQCCsRAEchAAFIEAIchxxAAAgQgAIQchxxAAAgQgAIQchxxAAgSgAIRchRwAAgSgAIRchRwAAgSgAIRchRwAAhBwAACGEbqIEAAAiCgAISG5ogQAAIQciAAiCgAISG5ogQAAIQciAAiCgAISF5AAiCgAISF5AAjwLpU6okpwU6AAAAABJRU5ErkJggg==" alt="图标" /> </template>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663981e8991b448e2354