React.js の正しい画像パス

Question

React プロジェクトの画像でいくつかの問題が発生しています。実際、私は常に src 属性の相対パスはファイルのスキーマに基づいて構築されるものだと思っていました。

これは私のファイル構造です:

コンポーネント
    ファイル1.jsx
    ファイル2.jsx
    ファイル3.jsx
容器
画像
js
...

しかし、パスは URL に基づいて構築されることに気付きました。私のコンポーネントの 1 つ (例: file1.jsx) には次のコードがあります。

localhost/details/2
<img src="../img/myImage.png" /> -> は正常に動作します

ローカルホスト/詳細/2/id
<img src="../img/myImage.png" /> -> 動作しないため、画像を表示できません

この問題を解決するにはどうすればよいですか? React-routerで処理されるルーティングフォームですべての画像を同じパスで表示したいと考えています。

Answer 1

#create-react-app では、画像の参照に相対パスを使用できないようです。代わりに、import を使用して画像を取り込むことができます: リーリー

Answer 2

相対 URL を使用しています。これは、ファイル システムではなく現在の URL に対する相対です。絶対 URL

を使用すると、この問題を解決できます。

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

ただし、これは、www.my-domain.bike またはその他のサイトに展開する場合には理想的ではありません。より良いアプローチは、サイトのルートに対する相対 URL を使用することです

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