Configure inline image import in Babel

Question

I'm using React.js and Babel, and importing png images of different sizes (some of them are more than 10kb of size). And when loaded to the docker-compose url, relative path is not working.

Here is my .babelrc file content

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["babel-plugin-styled-components", {
      "ssr": false,
    }],
    "babel-plugin-transform-inline-environment-variables"
  ]
}

So I want to load all the images as base64 aven those whose size are more than 10kb (limit). How to change the configuration for Babel?

Thank you in advance!

Answer 1

I found that it is possible to set more size in the configuration parameter of limit for "url-loader". In my case I'm using babel and parcel together and I set .parcelrc like this:

{
  "url-loader": {
    "exts": ["jpg", "jpeg", "png", "gif", "svg"],
    "limit": 66666
  }
}