Webpack url-loader jpg file inline

Question

I am trying to inline loading a jpg using url-loader like this:

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

after running I get:

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

The base 64 string decodes as:

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

I was expecting the base64 string of the binary file.

Is this expected behaviour? how can I actually achieve the base64 string of the binary file?

If I try to inline say an html file it works as expected..so why not with jpgs?

Filesize of this particular file is 417 KB but the limit parameter is way bigger than that.

Answer 1

I didn't try it, but something like this should work:

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

The problem is the loader order. If you check your webpack.config files, somewhere you have the file-loader there for jpg files. I know that because I know file-loader would output this:

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

... which is being piped into url-loader. That's why you're getting the base64 version of the string above. Because file-loader is returning that to the url-loader.

Please refer to the loader order documentation to learn how to override it. I think putting !! before will solve your problem.