在 Babel 中配置内联图像导入

Question

我正在使用 React.js 和 Babel，并导入不同大小的 png 图像（其中一些大小超过 10kb）。当加载到 docker-compose url 时，相对路径不起作用。

这是我的 .babelrc 文件内容

{
  "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"
  ]
}

所以我想将所有图像加载为 base64，包括那些大小超过 10kb（限制）的图像。如何更改 Babel 的配置？

提前致谢！

Answer 1

我发现可以在 limit 的配置参数中为 "url-loader" 设置更多的大小。在我的例子中，我同时使用了 babel 和 parcel 并且我设置 .parcelrc 是这样的：

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

在 Babel 中配置内联图像导入

Configure inline image import in Babel

reactjs

base64

babeljs

urlloader