Setting the path to an image internally in meteor 1.4 + react-router
<p>I am using React router with meteor and react.semantic-ui.</p>

<p>I want to render a logo (png) ind med menu/navigationbar, but the png does not appear, only a broken link icon, how to specify where to find the png internally in the project/on the filesystem?</p>

<p>I know in webpack you have to <em>require</em> the png file, but i can't figure out how to do it using meteor.</p>

<p>if I use an external link it works fine. If I follow the url to the png I get the warning</p>

<blockquote>
  <p>browser.js:49 Warning: [react-router] Location "/icons/Mmlogo.png" did not match any routes.</p>
</blockquote>

<p><strong>My navbar component:</strong></p>

<pre><code>import React, { Component } from 'react';
import {Link, IndexLink} from 'react-router';

import { Menu, Image} from 'semantic-ui-react';

import {LoginButton} from './header/Login.jsx';
import {LoggedIn} from './header/LoggedIn';
import MmSubheader from '../components/MmSubheader';

const logo = './Mmlogo.png';

export default class MmHeader extends Component {
  state = {}

  handleItemClick = (e, { name }) =&gt; this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      &lt;div&gt;
        &lt;Menu secondary pointing &gt;
          &lt;div className="ui container Mmheader"&gt;
            &lt;Menu.Item as={IndexLink} to='/' active={activeItem === ''}&gt;
              &lt;Image src={logo} size="mini" /&gt;
            &lt;/Menu.Item&gt;
            &lt;Menu.Item as={Link} to='/foryou' name='For You' active={activeItem === 'For You'} onClick={this.handleItemClick} /&gt;
            &lt;Menu.Item as={Link} to='/Discover' name='Discover' active={activeItem === 'Discover'} onClick={this.handleItemClick} /&gt;
            &lt;Menu.Menu position='right'&gt;
              &lt;Menu.Item&gt;
                &lt;LoginButton /&gt;
              &lt;/Menu.Item&gt;
            &lt;/Menu.Menu&gt;
          &lt;/div&gt;
        &lt;/Menu&gt;
      &lt;/div&gt;
    )
  }
</code></pre>

<p><strong>And my Router:</strong></p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import MainLayout from '../../ui/layout/MainLayout.jsx';
import Index from '../../ui/pages/Index.jsx';
import ForYou from '../../ui/pages/ForYou.jsx';
import Discover from '../../ui/pages/Discover.jsx';

Meteor.startup(() =&gt; {
  ReactDOM.render(
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={MainLayout}&gt;
        &lt;IndexRoute component={Index} /&gt;
        &lt;Route path="foryou" component={ForYou} /&gt;
        &lt;Route path="discover" component={Discover} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;,
    document.getElementById('react-root'))
})
</code></pre>