title: server side rendering 404 not found on all my images
body: <p>I am rendering my react app on my server but I get a 404 not found when trying to retrieve images. When I try to go to the directory of my images I get a 404. Why? 404 Not found on <code>localhost:8000/src/img</code> this is where my images live. </p>
  
  <p><code>server.js</code></p>
  
  <pre><code>app.use(express.static(path.join(__dirname, './src', '/img')));
  
  app.get('*', (req, res) =&gt; {
  
    const error = () =&gt; res.status(404).send('404');
    const htmlFilePath = path.join(__dirname, './', 'index.html');
    fs.readFile(htmlFilePath, 'utf8', (err, htmlData) =&gt; {
  
      if(err) {
        error()
      } else {
        match({ routes, location: req.url }, (err, redirect, renderProps) =&gt; {
  
          if(err) {
            error()
          } else if(redirect) {
            res.redirect(302, redirect.pathname + redirect.search);
          } else if(renderProps) {
            const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
            const store = createStoreWithMiddleware(reducers);
            const RouterContext = react.createElement(reactRouter.RouterContext, renderProps);
            const provider = react.createElement(Provider, { store: store }, RouterContext);
            const ReactApp = renderToString(provider);
            const RenderedApp = htmlData.replace('{{SSR}}', ReactApp);
            res.status(200).send(ReactApp);
          } else {
            error(); //Always enters this when trying to render images.
          }
        });
      }
    });
  });
  </code></pre>