image-source-loader 是一个方便的工具，它可以帮助你加载本地的图片文件，并返回一个 Base64 编码的字符串，这可以在前端开发中帮助你更方便的引用图片资源。
安装
你可以通过 npm 安装 image-source-loader：
npm install image-source-loader --save-dev
同时，你需要使用一个文件加载器（如 file-loader 或 url-loader），来将图片文件加载到 webpack 的 asset pipeline 中。
使用
安装完成后，你可以在 webpack 配置文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
--
-
------- ----------------------
--
--
--
--
--
--这样，当你在前端代码中引用一个图片文件时，webpack 会优先使用 image-source-loader，来将图片加载为 Base64 字符串。例如：
import imgSrc from './image.png';
const imgEl = document.createElement('img');
imgEl.src = imgSrc;
document.body.appendChild(imgEl);优缺点
使用 image-source-loader 的优点是，它可以在不使用网络请求的情况下，让你在开发时使用本地图片资源。同时，如果你需要以 Base64 编码的形式嵌入图片文件到 CSS、JS、HTML 等文件中，它也是一个方便的工具。
但是，由于 Base64 编码的字符串会比二进制文件更大，因此如果你需要加载大量的图片资源，这可能会影响到网页的加载速度。
总结
image-source-loader 是一个方便的工具，可以帮助你更方便地在前端开发中使用本地图片文件。但是，在使用时你需要注意加载的图片数量和图片文件的大小，以免影响到网页的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0af43b403f2923b035c0d9