title: How to render images with react on server side?
body: <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>