javascript - JS：如何动态获取变量名

Question

我正在使用 create-react-app 模板。

在我的一个组件中，我正在像这样导入几个图像的路径。

import iconAvatar from '../img/icon-avatar.png';
import iconHome from '../img/icon-home.png';
import iconVendor from '../img/icon-vendor.png';

现在假设我有一个像这样的变量，它决定使用什么图像。

let imageType = "avatar"; // or "home", or "vendor", etc.

我想根据 imageType 的值动态渲染出正确的图像（不必使用复杂的 if-else 结构）

类似于以下内容（除了它不起作用）

<img src={"icon"}{imageType}/>

我该怎么做呢？

标签： javascriptimportcreate-react-app

Answer 1

如果所有文件名都遵循该标准，则可以使用字符串连接。

<img src={'../img/icon-' + imageType + '.png'} />

甚至更清洁的字符串插值..

<img src={`../img/icon-{$imageType}.png`} />

编辑： 当使用 webpack 时，你必须使用require并且当使用require字符串连接时不起作用，但是字符串插值仍然有效。所以..

<img src={require(`/img/icon-{$imageType}.png`)} />

有关更多信息，请参阅此答案。