How to render images with react on server side?
<p>How can I render images and css files on server side with React?</p>

<p>Here is my server code:</p>

<pre><code>const express = require('express')
const router = express.Router()
const ReactDOM = require('react-dom/server');

import Master from '../../../client/Master'

router.get('/', (req, res) =&gt; {
    res.render('test.html', {reactOutput: ReactDOM.renderToString(&lt;Master/&gt;)});
});
</code></pre>

<p>Master component:</p>

<pre><code>import React from "react";
import Intro from "./pages/Intro";
import Footer from "./components/Footer";
import Header from "./components/Header";

export default class Master extends React.Component {
    constructor() {
        super();
        this.state = {appStatus: 'INTRO'}
    }

    render() {
        let layout;
        switch (this.state.appStatus) {
            case "INTRO":
                layout = &lt;Intro/&gt;;
        }

        return (
            &lt;div&gt;
                &lt;Header/&gt;
                {layout}
                &lt;Footer/&gt;
            &lt;/div&gt;
        )
    }
}
</code></pre>

<p>But when I run server with babel I got this error:</p>

<blockquote>
  <p>/assets/img/logo.png: Unexpected character '?' (1:0)</p>
</blockquote>

<p>And this is the Header component which tries to require logo.</p>

<pre><code>import React from "react";
**import logo  from '../../assets/img/logo.png';**

export default class Header extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            &lt;nav class="navbar navbar-default"&gt;
                &lt;div class="container-fluid"&gt;
                    &lt;div class="navbar-header"&gt;
                        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                            &lt;span class="icon-bar"&gt;&lt;/span&gt;
                            &lt;span class="icon-bar"&gt;&lt;/span&gt;
                            &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;a class="navbar-brand" href="#"&gt;**&lt;img width="250" src={logo} alt=""/&gt;&lt;/a&gt;**
                    &lt;/div&gt;


                &lt;/div&gt;
            &lt;/nav&gt;
        );
    }
}
</code></pre>

<p>But it works fine with webpack for client side..</p>