Webpack url-loader jpg文件内联

时间:2016-12-19 13:36:06

标签: javascript webpack urlloader

我正在尝试使用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,但限制参数大于此值。

1 个答案:

答案 0 :(得分:3)

我没有尝试过,但这样的事情应该有效:

  

让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

...正在通过file-loader进行管道传输。这就是为什么你要获得上面字符串的base64版本的原因。因为url-loader正在将其返回asadmin> create-javamail-resource --mailhost localhost --mailuser sample --fromaddress sample\@sun\.com mail/MyMailSession

请参阅loader order documentation了解如何覆盖它。我觉得要!!以前会解决你的问题。