Meteor 1,4 React React-router Images


#1

hey, I am using React router with meteor and react.semantic-ui.

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)?

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

browser.js:49 Warning: [react-router] Location “/icons/Mmlogo.png” did not match any routes

My react component:

const logo = './Mmlogo.png';

export default class MmHeader extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

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

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

My Router:

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(() => {
  ReactDOM.render(
    <Router history={browserHistory}>
      <Route path="/" component={MainLayout}>
        <IndexRoute component={Index} />
        <Route path="foryou" component={ForYou} />
        <Route path="discover" component={Discover} />
      </Route>
    </Router>,
    document.getElementById('react-root'))
})