0

I have an issue with my images in react. When i let the image render like this:

import road from '../../../../assets/images/icons/road.png';

<img src={road}  />

It will work but i want it to be dynamic relying on the input of data.

So i tried it this way (where icon is refering to a data set resulting in road):

import road from '../../../../assets/images/icons/road.png';
...

render() {
    const { place, date, icon, progress } = this.props.stage;
...

<img src={icon}  />

So my guess is that there is an issue with referencing here. From my question you can understand that i am absolutely new to react. What i also noticed is that with the method above i will get an unused var error if i dont load this image. So for example i have a couple of these icons but depending on the data in the dataset it will only render a few. Which i find kind of messy.

I hope you can steer me towards the right direction. Kinda frustrating not being able to implement an image...

TheWeeezel
  • 331
  • 1
  • 4
  • 16

2 Answers2

0

With this: Load images based on dynamic path in ReactJs

posted from Subham Khatri i was able to get the answer i desired.

<img src={require(`../../../../assets/images/icons/${icon}.png)`} />
TheWeeezel
  • 331
  • 1
  • 4
  • 16
0

As I understand you are trying to pass the image from this.props.stage. Did you first try console.log(icon). what do you see in the console window. First we need to know whether the data is being passed from props.

Serdar
  • 478
  • 3
  • 11