How to display images dynamically in React based on the respose from the server

Question

I am calling the OpenWeatherMap API and getting in the response the icon id 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 icon id 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: props.icon == '01d' => display image 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;

Unfortunately this wasn't the case. I've actually forgot to add the + '.png' when I copied the code from VS Code. Thanks for the suggestion anyways :) — Nandra Mihnea
– Nandra Mihnea, Commented Nov 23, 2019 at 15:43

Kevin.a · Accepted Answer · 2019-11-21 19:08:24Z

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;

Instead of using + operator to concatenate strings, you can use the handy template literal to make it a lot easier for you to concatenate strings together. Also add the .png format to the end of your file path since its an image you specify the extension name

answered Nov 21, 2019 at 19:08

Kevin.a

4,34615 gold badges52 silver badges93 bronze badges

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

1 Comment

Nandra Mihnea Over a year ago

I've tried as you suggested and even deleted the apostrophe inside the backticks and the results were the same. Maybe I need to import them somewhere? Because when I do 'import icon from blablabla' and use it like src={icon} it displays correctly. Any suggestions?

Collectives™ on Stack Overflow

How to display images dynamically in React based on the respose from the server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related