Can I dynamically call imported file names?

user_16054837 0
Viewed 39

I am making a seven day forecast react app. I have an images folder that has 28 icons for weather types split between day and night versions. Those images are imported like so into a component (for brevity I will only show 4 options):

import {
    dayclear, daycloudy,

    nightclear, nightcloudy
} from '../images'

Depending on the type of weather when this component is called, I'm trying to dynamically name an image source. Is there a way to concatenate a object name dynamically? Ex:

<img src={this.props.timeOfDay + this.props.weather} alt="Weather Image" />

I'm looking for that source to end up being the object name of the imported image.

reactjs javascript
2 Answers

try to store your images in a object like this:

const IMAGES = {
  dayclear,
  nightclear,
  ...
}

then create a weather name with

const { timeOfDay, weather } = this.props
const weatherName = `${timeOfDay > condition ? 'day' : 'night'}${weather}`

finally add it to src of image:

<img src={IMAGES[weatherName]} alt="Weather Image" />
user_116570210

Yeah, there is a way.

First, write the import statement like this.

import * as WeatherIcons from '../images'

Then add the image to the src attribute as mentioned below.

<img src={WeatherIcons[this.props.timeOfDay + this.props.weather]} alt="Weather Image" />

Here I consider that,

  • Values for timeOfDay prop can be day or night
  • Values for weather prop can be clear or cloudy
user_73626920
Related