Load images in JavaScript

[ppoliani]

I try to load images in JavaScript code and then use the base64 string as the src of images.

 const img1 = require("url?limit=10000!../../form/images/image1.png");
 const img2 = require("url?limit=10000!../../form/images/image2.png");

But when I decode the above base64 string I get something like the following:

module.exports = "data:image/png;base64,iVBORw0KGgoAA...

Why is the module.exports encoded as part of the image content?

[ppoliani]

Ok I have to require it twice to load the actual data.

[littlebee]

Huh? @ppoliani, what do you mean require it twice? I'm having issues with images loaded the same way as above. In my case it works in chrome but not firefox.

I perhaps incorrectly opened the issue on webpack repo: webpack/webpack#1668

[atomanyih]

this is hella old but for anyone having the same problem as above, the issue is that the image is probably going through multiple loaders.

if you have a loader for pngs defined in your webpack config it'll go through that first, giving you the module.exports =
then when you shove it through the url loader inline, it encodes the module instead of the image.

adding a ! at the start of the require overrides any loaders defined in webpack

 const img1 = require("!url!../../form/images/image1.png");