Image path in React.js?

Question

React

It seems like the path to the src attribute should be based on the file architecture.
In order not to depend on the route, I'm trying to get to the image through an absolute link.
As a result, at ` localhost:3000/components/Users/img/johnson.jpg ` I get 404.
Why does this happen in React?

let { userName } = useParams();
/* ... */
<img src={`${window.location.origin}/components/Users/img/${userName}.jpg`} />

Answer 1

If the picture is in " /components/Users/img/johnson.jpg " and you want to set the path to it in the Users component, then write like this

import johnsonImg from "./img/johnson.jpg"
...
<img src={johnsonImg} />

PS You can't look into the contents of src just by specifying a link like localhost:3000/src/components/foo/bar/example.file
If you need files with direct link access, put them in the "public" folder.