React Router Dom v6 - Image not found in nested routes

Question

In my tsconfig.json file, I have a "compilerOptions":{baseUrl} that enables me to look for images in public/images/foo.png like this <img src='images/foo.png/>.
Which is still working, except in my nested routes. It's working in line 16 and other routes that isn't nested, but not in line 17 even though I copy pasted it to make sure they have the same spelling and caps.

I've also tried looking into Browser's dev tool's inspector to see if they have similar src, which they do but the one has problem loading the image. working src not working src

Answer 1

When you tell the browser to look for images/foo.png when the current route is /foo/bar, for example, the browser will search for /foo/images/foo.png.

To avoid this, add a slash at the beginning of the path (e.g. images/foo.png would become /images/foo.png).

Answer 2

You should always precede the image path with a forward slash '/' like this

<img src='/images/foo.png/>

NOT like this

<img src='images/foo.png/>