2

我正在使用带有流星和 react.semantic-ui 的 React 路由器。

我想渲染一个徽标（png）ind med菜单/导航栏，但没有出现png，只有一个断开的链接图标，如何指定在项目内部/文件系统上的哪里可以找到png？

我知道在 webpack 中你必须需要png 文件，但我不知道如何使用流星来做到这一点。

如果我使用外部链接，它工作正常。如果我按照 url 访问 png，我会收到警告

browser.js:49 警告：[react-router] 位置“/icons/Mmlogo.png”不匹配任何路由。

我的导航栏组件：

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

还有我的路由器：

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

1 回答 1

2

在流星中，您需要将您的公共数据（如徽标和其他图像）放在公共文件夹中。并且您应该提供不包括公共文件夹名称的路径。

例子。如果您将徽标放入 中public/logo/MMLogo.png，则应将src属性值提供为logo/MMLogo.png

IE<img src="logo/MMLogo.png" />

您希望在哪个文件中显示此图像并不重要。

于 2016-10-26T17:51:10.593 回答