reactjs render image dynamically

Question

To be clear:

<img src={require('../styles/myimage.jpg')} />

works fine. But I want to get this path dynamically as a string from api. In my parent component I fetch it and pass to child:

<img src={require(this.props.image)} />

In this case this.props.image is the same as '../styles/myimage.jpg'. But it does not work for me and throw this error "Uncaught (in promise) Error: Cannot find module "."

How can I fix it?

The directory tree is (I am trying to fetch myimage.jpg from image.js)enter image description here: And webpack config: enter image description here

Make sure that the props have a value when your render is called — Shubham Khatri
– Shubham Khatri, Commented Jul 18, 2017 at 10:01
@ShubhamKhatri I even tried conditional rendering, so I make request with fetch...setState({image: data, loadImage: true}) and then in my child component i check if loadImage is true then I render "this.props.loadImage ? <img src={require(this.props.image)} /> : null". — DarKsi
– DarKsi, Commented Jul 18, 2017 at 10:14

LuKs Sys · Accepted Answer · 2017-07-18 11:48:20Z

1

Do a simple test, move styles path with contains yours jpg files to same path of your component and try this path in props:

props.image = './styles/myimage.jpg'

then

<img src={require(this.props.image)} />

answered Jul 18, 2017 at 11:48

LuKs Sys

2261 silver badge5 bronze badges

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

Comments

kikiwie · Accepted Answer · 2017-07-18 10:06:19Z

0

In addition to the comment what you can do is in your render method try this :

if (!this.props.image) return false;

answered Jul 18, 2017 at 10:06

kikiwie

3901 gold badge3 silver badges12 bronze badges

Collectives™ on Stack Overflow

reactjs render image dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related