javascript - 包括其他文件中的 Base64 图像？

Question

目前，我通过 data: 在我的 css 和 img 标签中使用 Base64 图像，你可以想象，通过在文件中包含整个 Base64 代码，这会变得非常困惑，因此我想知道是否有办法从外部文件导入它以及如何使用 webpack 处理这些？

Answer 1

webpack 的 url-loader正是为此目的而设计的!

要配置它，只需将其添加到 webpack-config 的加载器中即可:

{
  test: /\.(svg|jpg|png|gif)$/,
  loader: 'url?limit=10000',
}

如果您需要/导入的文件的大小低于指定限制，URL-loader 会返回一个数据 URI，否则它会捆绑该文件并返回 URL。

限制以字节为单位指定，因此 10000 大致意味着 10kB 以下的任何文件都将作为数据 URI 返回。如果不指定限制，则所有内容都将编码为数据 URI。不过，我建议您仅将其用于小文件。

因此，一旦设置完毕，varsmallImageUri = require('./smallImage.png');应该能够满足您的需求!如果 smallImage.png 低于您配置的限制，则为数据 URI；如果捆绑图像较大，则为捆绑图像的 URL。