Correct path for img on React.js

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture

Here my files architecture:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
...

However I realized that the path is built on the url. In one of my component (for example into file1.jsx) I have this:

localhost/details/2
 -> works

localhost/details/2/id
 -> doesn't work, images are not displayed

How is it possible to solve this problem? I want that in any form of routes handled by react-router, all images can be displayed with the same path.

You're using a relative url, which is relative to the current url, not the file system. You could resolve this by using absolute urls




But that's not great for when you deploy to www.my-domain.bike, or any other site. Better would be to use a url relative to the root directory of the site




Stack Overflow Q#37644265, score: 100