在前端开发中，我们经常需要将图片转换为base64格式，以便更快地加载网页。 css-b64-images是一个npm包，可以将CSS中的图片转换为base64格式。
本文将介绍如何安装和使用css-b64-images，以及它的一些高级用法。
安装
在命令行中运行以下命令来安装css-b64-images：
npm install css-b64-images
基本使用
假设您有以下CSS代码：
body {
background-image: url('./images/bg.jpg');
}要将此代码中的图片转换为base64格式，请按照以下步骤操作：
导入
css-b64-images模块：const CssB64Images = require('css-b64-images');创建
CssB64Images实例：const cssB64Images = new CssB64Images({ baseDir: __dirname, // 图片所在目录的绝对路径 });调用
convert方法：const cssWithBase64Images = cssB64Images.convert(css);
将返回转换后的CSS代码：
body {
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...');
}高级用法
自定义转换规则
默认情况下，css-b64-images会将CSS中的所有图片都转换为base64格式。但是，您也可以通过提供自定义转换规则来指定哪些图片需要转换。
例如，如果您只想将文件名以.bg结尾的图片转换为base64格式，可以这样做：
-- -------------------- ---- -------
----- ------------ - --- --------------
-------- ----------
-- -------
--------- -
-
------------ ----------------------------------- -- ----
--------- ----- -- ------------------
--
--
---使用回调函数
默认情况下，css-b64-images使用同步方法将图片转换为base64格式。但是，您也可以提供一个回调函数，以便在异步方式下执行转换。
例如，如果您的项目中有一个异步的获取图片路径的方法getImagePath，您可以这样使用回调函数：
-- -------------------- ---- -------
----- ------------ - --- --------------
-------- ----------
-- --------------
------------------- -------- --- -- -
----------------------------------- -- -
-------- ---------
-- ----
--
---
------------------------- ----- -------------------- -- -
-- ----- -
-------------------
- ---- -
---------------------------------
-
---示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
----- ------------ - --------------------------
----- --- - -
---- -
----------------- -----------------------
----------------- -----
-
--
----- ------------ - --- --------------
-------- ----------
---
----- ------------------- - --------------------------
---------------------------------这将输出转换后的CSS代码：
body {
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...');
background-color: #fff;
}总结
css-b64-images是一个非常有用的npm包，可以帮助您快速将CSS中的图片转换为base64格式。本文介绍了如何安装和使用它，以及一些高级用法，希望对您
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43491