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

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 错误。因此，例如，我有几个这样的图标，但根据数据集中的数据，它只会呈现几个。我觉得有点乱。

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

标签： reactjsimage

Answer 1

据我了解，您正在尝试从 this.props.stage 传递图像。您是否首先尝试了 console.log(icon)。您在控制台窗口中看到了什么。首先我们需要知道数据是否是从 props 传递过来的。