React router not allowing images to load

To make sure that the image is taken from the root of the server and not the relative directory of the current route, add a / in front of the src:

<Image className={styles.avatar} src={`/${avatar}`} rounded />

What worked for me was to set the HTML base reference to the web root

<head>
    <base href="/">
</head>

this also solved some other problems with the router when refreshing the page at a predetermined route.

Tags:

Javascript

Reactjs

React Router

Recent Posts