url-loader is encoding path instead of image

[romulof]

import tickImg from '../assets/tick.svg';
...
render () {
    return (
        ...
        <div style={{ backgroundImage: `url(${tickImg})` }} />
        ...
    );
}

Results in inline-style:

background-image: url("data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhc3NldHMvaW1hZ2VzL3RpY2stQ3lydkhSdi5zdmciOw==");

Decoding the base64 string:

module.exports = __webpack_public_path__ + "assets/images/tick-CyrvHRv.svg";

[romulof]

If I force the loader, it works correclty:

const tickImg = require('!!url!../assets/tick.svg');
...

[romulof]

Here's my webpack loaders configuration:

    {
      test: /\.(png|svg)$/,
      loader: 'url',
      query: {
        limit: 10000,
      },
    }, {
      test: /\.(png|jpg|svg)$/,
      loader: 'file',
      query: {
        name: 'assets/images/[name]-[sha512:hash:base64:7].[ext]',
      },
    }

[julienevano]

@romulof It is probably encoding the path instead of the url because you have 2 loaders for the same file:

• the first loader (url) is encoding the image and returns a path to the encoded image
• the second loader (file) is encoding path to the encoded image

The solution is to use a single loader, similar to:

{
  test: /\.(png|svg)$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: 'assets/images/[name]-[sha512:hash:base64:7].[ext]'
  }
}

[romulof]

@julienevano, I'm not chaining the loaders. I have 2 distinct tests, one with url-loader only and another with file-loader only.

I'm not sure about how url-loader works when the limit query don't match. Let's say: if the file is bigger than limit the loader refuses the file and Webpack tries to find another loader for it?

How do you file-loader as fallback for url-loader?

[romulof]

Oh, I just read the code!

url-loader already uses file-loader as fallback.

[olistik]

I guess the problem lies in the documentation, because if I read:

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

https://webpack.js.org/loaders/url-loader/#usage

and even if I read about the limit parameter later on:

If the file is greater than the limit (in bytes) the file-loader is used and all query parameters are passed to it.

I'm still not fully aware that I need to remove file-loader and that I can pass all of file-loader options within url-loader.

[emkayy]

I have the same issue in SCSS files. When the file size exceeds the limit, module.exports = __webpack_public_path__ + "..."; gets base64 encoded as the file content!

Did you find any solution?