reactjs - react : How to import images dynamically depending on environment variables?

Question

我需要根据流程环境变量导入不同的徽标图像。

import logo from `./assets/flavour/${process.env.REACT_APP_API_BASE_DIR}/logo.png`;

这会引发错误: Unexpected token error .
我怎样才能做到这一点？那可能吗？

Answer 1

尝试使用动态导入或 webpack。
动态导入
您的导入将如下所示:

let logo;
import(`./assets/flavour/${process.env.REACT_APP_API_BASE_DIR}/logo.png`).then((module) => {
  logo = module.default; // <= base64 image
});

...

<img src={logo} alt="logo" />

但通过这种方式，您将获得所需的 logo仅在下一次渲染时的值，如果 logo之前加载过。
因此，可以选择使用此 useState并在我们的功能组件中导入:

export const Logo = () => {
  const [logo, setLogo] = useState('');

  import(`./assets/flavour/${process.env.REACT_APP_API_BASE_DIR}/logo.png`).then((module) => {
    setLogo(module.default);
  });

  return (
    <img src={logo} />
  );
};

如果你有很多这样的图像导入，那么这个组件可以被重写，以便它是可重用的:

export const Image = ({path, alt}) => {
  const [imageSrc, setImageSrc] = useState('');

  import(path).then((module) => {
    setImageSrc(module.default);
  });

  return (
    <img src={imageSrc} alt={alt} />
  );
};

Wepback 别名
我想到的第二个选项是尝试使用 Webpack 别名。为此，请添加到您的 webpack.config.js

module.exports = (env) => ({
  // ...
  resolve: {
    // ...
    alias: {
      '@assets': path.join(__dirname, 'assets', 'flavour', env.REACT_APP_API_BASE_DIR),
    },
  },
  // ...
})

然后在您的代码中使用:

import logo from `@assets/logo.png`;