React：如何根据环境变量动态导入图像？

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在我们的功能组件中使用它并导入：

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" />

如果您导入了很多此类图像，则可以重写此组件以使其可重用：

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} />
  );
};

Wepback 别名

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

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

然后在您的代码中使用：

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

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

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