Javascript 如何根据服务器的响应在React中动态显示图像

我正在调用OpenWeatherMapAPI，并在响应中获得图标id，如'01d'或'04n'。 我已经在/src的本地目录下设置了所有图像，并将它们命名为'01d.png'，'04n.png'等等。

我已通过道具将此图标id传递给我的Current.js组件，我不知道如何显示具有特定id名称的图像。

e、 g:

props.icon==“01d”

=>显示图像01d.png

从“React”导入React；
从“/Current.module.css”导入类；
当前常量=（道具）=>{
返回(
温度：{props.Temperature}

最低温度：{props.minimumTemperature}

最高温度：{props.maximumTemperature}

湿度：{props.湿度}

)
}
输出默认电流；

从“React”导入React；
从“/Current.module.css”导入类；
当前常量=（道具）=>{
返回(
温度：{props.Temperature}

最低温度：{props.minimumTemperature}

最高温度：{props.maximumTemperature}

湿度：{props.湿度}

)
}
输出默认电流；

---

您可以使用方便的模板文字，而不是使用+运算符来连接字符串，从而使您更容易将字符串连接在一起。另外，将.png格式添加到文件路径的末尾，因为它是一个图像，您指定的扩展名

丢失了

.png

，不幸的是，情况并非如此。实际上，当我从VS代码复制代码时，我忘记添加+'.png'。不管怎样，谢谢你的建议：）我已经按照你的建议试过了，甚至删除了背景符号中的撇号，结果都是一样的。也许我需要把它们导入某个地方？因为当我“从bla导入图标”并像src={icon}一样使用它时，它会正确显示。有什么建议吗？

import React from 'react';
import classes from './Current.module.css';

const current = (props) => {
    return (
        <div className={classes.Current}>
            <p>Temperature: {props.temperature}</p>
            <p>Minimum Temperature: {props.minimumTemperature}</p>
            <p>Maximum Temperature: {props.maximumTemperature}</p>
            <p>Humidity: {props.humidity}</p>
            <img src={'../../icons/' + props.icon} alt={props.icon}/>
        </div>
    )
}

export default current;

import React from 'react';
import classes from './Current.module.css';

const current = (props) => {
    return (
        <div className={classes.Current}>
            <p>Temperature: {props.temperature}</p>
            <p>Minimum Temperature: {props.minimumTemperature}</p>
            <p>Maximum Temperature: {props.maximumTemperature}</p>
            <p>Humidity: {props.humidity}</p>
            <img src={`../../icons/'${props.icon}.png`} alt={props.icon}/>
        </div>
    )
}

export default current;