Setting the path to an image internally in meteor 1.4 + react-router

Question

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?

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

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 navbar component:

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 }) => 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>
    )
  }

And 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'))
})

Answer 1

In meteor you need to put your public data like logos and other images in public folder. And you should provide the path excluding public folders name.

Example. If you put your logo in public/logo/MMLogo.png, then you should provide the src attributes value as logo/MMLogo.png

i.e. <img src="logo/MMLogo.png" />

Doesn't matter in which file you want display this image.