在路径中输入数据的图像处理

Question

我的图像反应有问题。当我让图像呈现如下：

import road from '../../../../assets/images/icons/road.png';

<img src={road}  />

它会工作，但我希望它依赖于数据输入是动态的。

所以我尝试了这种方式（图标指的是导致道路的数据集）：

import road from '../../../../assets/images/icons/road.png';
...

render() {
    const { place, date, icon, progress } = this.props.stage;
...

<img src={icon}  />

所以我的猜测是这里引用存在问题。从我的问题，你可以理解，我是新的反应。我还注意到，使用上面的方法，如果我不加载此图像，我将得到一个未使用的var错误。例如，我有几个这样的图标，但根据数据集中的数据，它只会渲染一些。我发现有点凌乱。

我希望你能引导我走向正确的方向。有点令人沮丧的是无法实现图像......

Answer 1

有了这个：Load images based on dynamic path in ReactJs

从Subham Khatri发布我能得到我想要的答案。

<img src={require(`../../../../assets/images/icons/${icon}.png)`} />

Answer 2

据我所知，你试图从this.props.stage传递图像。您是否首先尝试使用console.log（icon）。你在控制台窗口看到了什么首先，我们需要知道数据是否从props传递。