javascript - JS : How to dynamically grab variable names

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

我该怎么做？

Answer 1

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

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

或者使用 string interpolation 更干净..

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

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

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

参见this answer了解更多信息。