私は流星とreact.semantic-uiでReactルーターを使用しています。
ロゴ (png) ind med メニュー/ナビゲーションバーをレンダリングしたいのですが、png が表示されず、破損したリンク アイコンのみが表示されます。プロジェクト内またはファイル システム上で内部的に png を検索する場所を指定する方法を教えてください。
webpackではpngファイルを要求する必要があることは知っていますが、流星を使用してそれを行う方法がわかりません。
外部リンクを使用すると、正常に動作します。pngへのURLをたどると、警告が表示されます
browser.js:49 警告: [react-router] 場所 "/icons/Mmlogo.png" はどのルートとも一致しませんでした。
私のnavbarコンポーネント:
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'))
})