structure of img directory react.js

Question

How on earth do i get images to display? 40 mins reaserching and still no joy. I think the real answer is where do i put images.

structure of the main dir

App.js
public > index.js 
Views >
      index.jsx
      layouts >
          footer.jsx
          header.jsx
          master.jsx

Wherever i put the images they won't display. the main file that gets called and renders the html is index.jsx inside the views folder.

I am using express to create the virtual server and as the core engine.

i have tried the following inside the header.jsx file

<img src='images/main_home_icon.png'/>
<img src={require('images/main_home_icon.png')} />

Solution

It depends. If you use the <img src='images/main_home_icon.png'/> form, then your base path is the public directory. Normally you create a bundle.js with browserify or webpack and put the javascript file in a directory with an index file. You would then have to put the images in the same directory.

On the other hand you can include your images directly in your javascript code with:

<img src={require('images/main_home_icon.png')} />

Then your base path is the base path of the jsx file (in your case: layouts folder). I would advise to use this method because you can define e.g. in your webpack config which images (depends on their size) should be included in your bundle file as a base64 string and which are included only with their relative path.

For further reading I would suggest to take a look at this "cookbook": https://github.com/christianalfoni/react-webpack-cookbook