Proper way to load local stored images from folder in React

Question

I am calling the OpenWeatherMap API and getting in the response the iconID like 01d or 04n. I've set up all the images under a local directory in /src and named them 01d.png, 04n.png etc.

I've passed this iconID via props to my Current.js component and I don't know how can I display the image with the specific id name.

E.G:

I would like to display image 01d.png if the response from the server is equal to 01d

P.S:

props.icon stores the data from the server and it is indeed good data.

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;

Here is a screenshot of my folder structure

Amir-Mousavi · Accepted Answer · 2019-11-25 18:08:36Z

2

First of all make sure that the images folder is not out of src, then load image like

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

Or if it is only one image id passed to component and no need for maping you can lazy load it when component renders.

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

Then wrap the img tag with Suspense and <img src={pic} />

answered Nov 25, 2019 at 18:08

Amir-Mousavi

4,65315 gold badges79 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Proper way to load local stored images from folder in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related