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

Question

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

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

例如: 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 格式添加到文件路径的末尾，因为它是您指定扩展名的图像