javascript - Webpack url-loader 内联 jpg 文件

Question

我正在尝试使用 url-loader 内联加载 jpg，如下所示:

let image1 = require("url?limit=100000000!./samples/sample.jpg");

运行后我得到:

"data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIuL3d3d3cvaW1nL3NhbXBsZS5qcGciOw=="

base 64 字符串解码为:

module.exports = __webpack_public_path__ + "./wwww/img/sample.jpg";

我期待二进制文件的 base64 字符串。

这是预期的行为吗？我怎样才能真正实现二进制文件的base64字符串？

如果我尝试内联一个 html 文件，它会按预期工作。那么为什么不使用 jpg 呢？

此特定文件的文件大小为 417 KB，但限制参数远大于此。

Answer 1

我没有尝试过，但类似这样的东西应该有效:

let image1 = require("!!url?limit=100000000!./samples/sample.jpg");

问题出在加载器顺序上。如果您检查 webpack.config 文件，您会发现某个地方有 file-loader 用于 jpg 文件。我知道这一点是因为我知道 file-loader 会输出以下内容:

module.exports = \__webpack_public_path__ + "./wwww/img/sample.jpg";

...正在通过管道传输到 url-loader 中。这就是为什么您会得到上面字符串的 base64 版本。因为 file-loader 正在将其返回给 url-loader。

请引用loader order documentation了解如何覆盖它。我觉得放!!之前就能解决你的问题。