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 文件，它会按预期工作..那么为什么不使用 jpgs 呢？

此特定文件的文件大小为 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 了解如何覆盖它。我认为把！ before 会解决你的问题。

Webpack url-loader jpg file inline