image is not loading/showing after routing react-router

Question

I have been working with react-router-dom for quite a time but not faced this problem at all, everything working fine with the navbar image when I'm in the "/" root address but when I route to /student/view/:id the navbar image is not loading!

Here's the code!!

Main file code:

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

Navbar file code:

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

Try /assets/images/administrator.png, plus remember to check the network tab for more info about the error ( or weird behaviour ) — Gayatri Dipali
– Gayatri Dipali, Commented Jan 12, 2021 at 6:53
thank you very much now i know whats the problem because of you it was that "/" that causing problem, thanks for increasing my knowledge. — Abbas Hussain
– Abbas Hussain, Commented Jan 12, 2021 at 23:09

Evgeny · Accepted Answer · 2022-12-12 17:47:03Z

3

The solution is as simple as add / at the beginning of the link to the image:

Just change <img src="assets/images/administrator.png"

to <img src="/assets/images/administrator.png"

Original answer were posted in comments by @GayatriDipali, I've moved it to answer section just to make it more readable!

answered Dec 12, 2022 at 17:47

Evgeny

1,32313 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

image is not loading/showing after routing react-router

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related