Question

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

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

E.G：

如果服务器的响应等于01d.png，我想显示图像01d

PS：

props.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 + '.png'}[enter image description here][1] alt={props.icon}/>
        </div>
    )
}

export default current;

这是我的文件夹结构的屏幕截图

Answer 1

首先确保图像文件夹不在src之外，然后加载类似图像

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

或者，如果只有一个图像ID传递给组件，并且不需要映射，则可以在组件渲染时延迟加载它。

const current = (props) => {
   const pic = React.lazy(()=>import(`../../icons/${props.icon}.png`))
   ......

然后用img和Suspense包装<img src={pic} />标记

从React中的文件夹加载本地存储图像的正确方法

1 个答案: