server rendering and images about react-starter

[sokra]

Doesn't it work that way?

reactLogo = require('../images/react-logo.png');

export default class Header extends React.Component {  

  render() {
    return (
        <div>        
        <img src={reactLogo} height="60" />
                <header>

[darul75]

Well I guess I use it the wrong way.

Rendering is made by an express server side instance which render a react component and enhances an html template.

This html template links a bundle.js packed by webpack, in this bundle image src is fine because generated by webpack process.

But on server side src is missing.

[darul75]

Test is made this way

if (process.env.BROWSER) {
  reactLogo = require('./images/react-logo.png');    
  // css require then, but are fine as React do not care about it.
}

but for express server I do not figure out how to match rendering image in component

[sokra]

307594c

[darul75]

Thanks for adding an example, I was not bundling my server side with webpack which caused problem. It looks solve on my side too. What a crazy solution then webpack. Very impressive

[darul75]

You need to apply your webpack to both client and server code files at the same time. It will use same hashes, otherwise will be different and react won't be happy