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。

Answer 2

您有几种选择：

首先使用@CertainPerformance建议的对象

const images = {
  avatar: require('../img/icon-avatar.png'),
  home: require('../img/icon-home.png'),
  vendor: require('../img/icon-vendor.png')
}

<img src={images[imageType]} />

或者您可以使用switch / if语句

switch (imageType) {
  case 'home': return <img src={iconHome} />;
  case 'avatar': return <img src={iconAvatar} />;
  case 'vendor': return <img src={iconVendor} />;
}

JS：如何动态获取变量名

2 个答案: