返回

Vue3 项目中 10 KB 以下图片转 Base64 格式：超实用的指南

前端

图像优化在现代 Web 开发中的重要性

随着互联网速度和设备功能的不断提升，用户对网站和应用程序的加载速度要求也越来越高。其中，图像优化是影响页面性能的关键因素之一。大型图像不仅会减慢页面加载速度，还会消耗大量带宽，对于移动用户来说尤其成问题。

Base64：一种将图像嵌入 HTML 的方法

Base64 是一种将二进制数据（如图像）编码为文本字符串的方法。这使得可以将图像直接嵌入 HTML 中，无需单独的 HTTP 请求。对于小尺寸图像（通常小于 10 KB），这种方法可以显着提高性能，因为浏览器无需从服务器加载单独的图像文件。

在 Vue3 项目中配置 Base64 图像转换

在 Vue3 项目中，可以使用 webpack 的 base64-loader 插件将 10 KB 以下的图片转换为 Base64 格式。要配置此插件，请按照以下步骤操作：

  1. 安装 base64-loader

    npm install --save-dev base64-loader

  2. 在 vue.config.js 中添加配置

    module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('base64-loader')
      .loader('base64-loader')
      .options({
        limit: 10000, // 将 10 KB 以下的图片转换为 Base64
        name: '[name].[ext]',
      })
      .end();
  },
};

  3. 使用 Base64 图像

    现在，您可以使用 Base64 编码的图像了。只需像这样将 src 属性设置为 Base64 字符串：

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkVCjIcDvyUCAAAIABJREFUeJztnXd4VEX2x/HbKJgW5ZGRCxJaQExkQCEUE0FdVFxQVU0Gikq0iK6iC6aCzYqKI2BBVQUVGYwoqawzSmIBuBDYAlStESUZERASEigFhJlAQlZ+bG97V2f/93f++3++959zzzm7n+75/7//f/O++/85/83L/0e0rfmNJ08wfPfAv/84xtS/Al0F8NTfcIX/R//5//s/+IxT/In/7+H73/3d33/l/vXf/zHX1z8A9D8Ab/z1z9+/HH235/+8A/+8A/8ngPP/jwP/7wP//AP/7AP//w/+AD/8w/+wD//Q/+AD//QD//wA/+A/+AD//AP/8AD/8Q/+wD//QD//QD/4wD//AD//gD/7wD/7wD//wA/+8A/8AD/7wD/7wD//AD//AP/8AD/8AD//wD//AD//AD//gD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD//AD//AP/8AD/8AD//wD//QD//wA/8AD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD//AD//AP/8AD/8AD//wD//QD/4wD//AD//gD/7wD/7wD/7wD/7wD/7wD//QD//QD//AD/4wD//AD//AP/8AD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7wD/7w