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

Question

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

我已经通过了这个 iconID通过props到我的Current.js组件，我不知道如何显示具有特定 ID 名称的图像。

例如:

我想显示图片 01d.png如果来自服务器的响应等于 01d

附言:

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

首先确保images文件夹不在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} />