url-loader is encoding path instead of image about url-loader HOT 7 CLOSED

@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]'
  }
}

from url-loader.

Oh, I just read the code!

url-loader already uses file-loader as fallback.

from url-loader.

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.

from url-loader.

If I force the loader, it works correclty:

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

from url-loader.

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]',
      },
    }

from url-loader.

@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?

from url-loader.

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?

from url-loader.