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

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`;

Answer 2

我写了一篇关于如何管理它的文章，并附上一个例子：React/Javascript/Node中基于动态环境的导入。您可以自定义此解决方案以满足您的需求。

我的解决方案使用python脚本来设置目标并更改导入。

npm run target-ios

Modifying imports to match the specified platform: ios
Line modified in file: ./app/components/profiles/Avatar.tsx
Org: import PlatformAvatar from "./Avatar.webandroid"; // !dynamic-import options=["webandroid", "ios"]
New: import PlatformAvatar from "./Avatar.ios"; // !dynamic-import options=["webandroid", "ios"]