[解決済み] React.jsのimgの正しいパスについて

質問

reactのプロジェクトで画像に問題があります。確かに、src属性への相対的なパスは、ファイルアーキテクチャに構築されていると私はいつも思っていました。

私のファイルアーキテクチャはこちらです。

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

しかし、私はパスがURLで構築されていることに気づきました。私のコンポーネントの1つ（例えばfile1.jsx）に、次のようなものがあります。

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

この問題を解決するにはどうすればよいのでしょうか？react-routerで処理されるどのような形式のルートでも、すべての画像を同じパスで表示できるようにしたいのです。

どのように解決するのですか？

相対urlを使用していますが、これはファイルシステムではなく、現在のurlに対して相対的なものです。 あなたは、絶対的なURLを使用することによって、これを解決することができます

<img src ="http://localhost:3000/details/img/myImage.png" />

しかし、これでは www.my-domain.bike などのサイトにデプロイするときに困ります。 より良い方法は、サイトのルートディレクトリからの相対 URL を使用することです。

<img src="/details/img/myImage.png" />