鍍金池/ 問答/HTML5  HTML/ react router 路由嵌套下圖片失效?

react router 路由嵌套下圖片失效?

用的create-react-app開發(fā),有個(gè)嵌套路由,比如home/music這樣的

在home頁面,圖片可以顯示,請(qǐng)求地址是正確的static/media/,但是到了 home/music下,圖片前面就路徑就加了一個(gè)home,變成 home/static/media/

我的嵌套路由是長(zhǎng)這樣的

        <Route path="/home" exact component={FindMusic} />
        <Route path="/home/fmusic" exact component={FindMusic} />
        <Route path="/home/fradio" exact component={RadioPage} />

不知道是不是這樣寫的?

主要路由是這樣寫的:

    <Switch>
        <Route path="/home" component={AsyncHome} ></Route>
        <Route path="/video" component={AsyncVideo} ></Route>
        <Route path="/mymusic" component={AsyncMyMusic} ></Route>
        <Route path="/friends" component={AsyncMyFriends} ></Route>
        <Route path="/user" component={AsyncUser} ></Route>
    </Switch>

圖片路徑是這樣寫的:

import daypushbtn from './images/daypushbtn.svg'
import fmbtn from './images/fmbtn.svg'
import musiclistbtn from './images/musiclistbtn.svg'
import rankbtn from './images/rankbtn.svg'

const switchImg = (e) =>
{
    switch (e.props.name) {
        case '私人FM':
            return fmbtn
            break;
        case '每日推薦':
            return daypushbtn
            break;
        case '歌單':
            return musiclistbtn
            break;
        case '排行榜':
            return rankbtn
            break;


    }
} 

export class DayPushItem extends Component {
  render() {
    return (
      <div className='DayPushItem'>
            <div className='itemImg'>
                <img src={switchImg(this)}/>
            </div>
            <div className='itemText'>{this.props.name}</div>
      </div>
    )
  }
}

export default DayPushItem



線上地址 : http://react.packy.club/ 閑著學(xué)習(xí)react ,想仿一個(gè)網(wǎng)易云音樂

抱歉,我看錯(cuò)了,圖片地址沒有變化。但是就是請(qǐng)求不到地址,如下圖:
私人FM ,每日推薦,歌單,排行榜 那里的圖片錯(cuò)誤了。

主域名 home/
圖片描述

home/fmusic

圖片描述

然后網(wǎng)絡(luò)請(qǐng)求里,請(qǐng)求地址變化了

之前:
圖片描述

之后:
圖片描述

難道是因?yàn)橐雸D片的時(shí)候使用的是相對(duì)路徑,所以會(huì)這樣嗎?可是我的create-react-app寫別名的時(shí)候build就會(huì)報(bào)錯(cuò)。

我react-route使用的是 BrowserRouter 且用的是apache 服務(wù)器,所以在項(xiàng)目根目錄下配置了.htaccess 來使項(xiàng)目刷新不會(huì)404,。

回答
編輯回答
放開她

你對(duì)圖片路徑做了說明處理么?

2018年9月14日 13:53
編輯回答
情未了

圖片用require的方式引入啊 ,如:require('./images/test.png');

2017年10月24日 06:32
編輯回答
硬扛

圖片的路徑貼出來看看

2017年3月19日 13:28