Webpack and React.js

Question

I try to use webpack with my react.js-application. The issue I am having is regarding the images. If I require the correct image in my entry-file, the image gets build to the correct destination, but my application can't find it. I just get a blank image:

main.jsx: require('./styles/images/logo.png');

in my application: <img src="images/logo.png"  width="60%" alt="" />

When I require the image directly in the src-tag however everything is good:

<img src={require('../styles/images/logo.png')} alt="" width="80px" />

Is there anyone know what I am doing wrong? I would like to be able to just require the whole image-folder and every img-tag would be filled with the correct image. Any leads toward the solution would be much appreciated :)

gcedo · Accepted Answer · 2015-12-11 13:59:14Z

2

Given that the loader is correctly set in the webpack configuration, you would usually import and use an image in the following way:

var image = require('./styles/images/logo.png');

And then:

<img src={image} />

The two statements must obviously reside in the same file.

answered Dec 11, 2015 at 13:59

gcedo

4,9611 gold badge23 silver badges28 bronze badges

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

1 Comment

user2236165 Over a year ago

Yes, thats basically how I am doing it now. So this is the best practice when it comes to webpack and images? To require the images I need in each file instead of requiring all the images in my entry-file?

Collectives™ on Stack Overflow

Webpack and React.js

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