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

Question

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

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

eg: props.icon == '01d' => 显示图片 01d.png

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;

Answer 1

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;

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