开发者问题收集

路由 react-router 后图像未加载/显示

2021-01-10
961

我已经使用 react-router-dom 很长一段时间了,但从来没有遇到过这个问题,当我在 "/" 根地址时,导航栏图像一切正常,但是当我路由到 /student/view/:id 时,导航栏图像没有加载!

这是代码!!

主文件代码:

<Router>
  <div className="App">
    <Navbar />
    <Switch>
      <Route exact path="/" component={StudentCard} />
      <Route exact path="/student/view/:id" component={StudentView} />
    </Switch>
  </div>
</Router>

导航栏文件代码:

 <nav className="navbar navbar-expand-sm navbar-light bg-white">
  <div className="container">
    <Link className="navbar-brand" to="/">
      <img src="assets/images/administrator.png" height="50px" alt="admin" />
    </Link>
1个回答

解决方案很简单,只需在图片链接开头添加 / 即可:

只需将 <img src="assets/images/administrator.png"

更改为 <img src="/assets/images/administrator.png"

原始答案由@GayatriDipali 发布在评论中,我已将其移至答案部分以使其更具可读性!

Evgeny
2022-12-12