title: React router not allowing images to load
body: <p>I am using react-router for the first time and I am having a little problem with my project. React-router is changing the url fine, but then my images are not getting loaded. I believe it is because the base url changes, for example it works when the link it's like this: <code>http://localhost:3000/f0287893b2bcc6566ac48aa6102cd3b1.png</code> but it doesn't when it's like this <code>http://localhost:3000/module/f0287893b2bcc6566ac48aa6102cd3b1.png</code>. Here is my router code:</p>
  <pre><code>import { Router, Route, browserHistory, IndexRoute } from 'react-router'
  import { syncHistoryWithStore } from 'react-router-redux'
  import { Provider } from 'react-redux'
  import ReactDOM from 'react-dom'
  import React from 'react'
  
  import App from './containers/App'
  import configure from './store'
  import Home from './components/home';
  import Module from './components/module-page/module';
  import Login from './components/login/login';
  
  const store = configure();
  const history = syncHistoryWithStore(browserHistory, store);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
        &lt;Route path=&quot;/&quot; component={App}&gt;
          &lt;IndexRoute component={Login} /&gt;
          &lt;Router path=&quot;/home&quot; component={Home}/&gt;
          &lt;Router path=&quot;/module(/:module)&quot; component={Module}/&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  )
  </code></pre>
  <p>this is where the link is triggered:</p>
  <pre><code>  import React, { Component } from 'react';
    import { ROUTE_MODULE } from '../../constants/Routes';
    import { Link } from 'react-router';
    import styles from './side-bar-items.css';
    import { Navbar, Nav, NavItem, Collapse } from 'react-bootstrap/lib'
    import FontAwesome from 'react-fontawesome';
    
    class SideBarItems extends Component {
    
      constructor(prop) {
        super(prop);
        this.state = { open: false };
      }
    
      render() {
    
        return (
          &lt;Navbar.Collapse&gt;
            &lt;Nav&gt;
              &lt;NavItem className={styles.navItem} eventKey={1}&gt;
                &lt;FontAwesome className={styles.navItemIcon} name='globe' size=&quot;lg&quot;/&gt;
                 &lt;span className={styles.navItemIconText}&gt;Dashboard&lt;/span&gt;
              &lt;/NavItem&gt;
              &lt;NavItem onClick={this.showModules} className={`${styles.navItem} ${styles.itemModule}`}&gt;
                &lt;FontAwesome className={styles.navItemIcon} name='clone' size=&quot;lg&quot;/&gt;
                &lt;span className={styles.navItemIconText}&gt;Modules&lt;/span&gt;
                &lt;Collapse in={this.state.open}&gt;
                  &lt;div className={styles.collapse}&gt;
                    &lt;div className={styles.module}&gt;
                      &lt;Link to=&quot;/module/moduleCode=2999&quot;&gt;Programming III&lt;/Link&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/Collapse&gt;
              &lt;/NavItem&gt;
            &lt;/Nav&gt;
          &lt;/Navbar.Collapse&gt;
        )
      }
    
      showModules = () =&gt; {
        this.setState({ open: !this.state.open })
      }
    }
    
    export default (SideBarItems);
  </code></pre>
  <p>This is where I import the image:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import Image from 'react-bootstrap/lib/Image'
  import avatar from '../../images/avatar.jpg';
  import styles from './user-image.css';
  
  class UserImage extends Component {
  
  render() {
  
    return (
      &lt;div className={styles.userContainer}&gt;
        &lt;Image className={styles.avatar} src={avatar} rounded /&gt;
        &lt;span className={styles.userName}&gt;Hello, Daniel&lt;/span&gt;
        &lt;span className={styles.userCourse}&gt;SEC, Software Engineering&lt;/span&gt;
      &lt;/div&gt;
    )
  }
  }
  
  export default (UserImage);
  </code></pre>
  <p>this is how the website looks when I click on the link</p>
  <p><a href="https://i.stack.imgur.com/mAIM9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mAIM9.png" alt="image" /></a></p>