React プロジェクトの画像でいくつかの問題が発生しています。実際、私は常に src 属性の相対パスはファイルのスキーマに基づいて構築されるものだと思っていました。
これは私のファイル構造です:
コンポーネント ファイル1.jsx ファイル2.jsx ファイル3.jsx 容器 画像 js ...
しかし、パスは URL に基づいて構築されることに気付きました。私のコンポーネントの 1 つ (例: file1.jsx) には次のコードがあります。
localhost/details/2-> は正常に動作します ローカルホスト/詳細/2/id
この問題を解決するにはどうすればよいですか? React-routerで処理されるルーティングフォームですべての画像を同じパスで表示したいと考えています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
#create-react-app
では、画像の参照に相対パスを使用できないようです。代わりに、import を使用して画像を取り込むことができます:リーリー相対 URL を使用しています。これは、ファイル システムではなく現在の URL に対する相対です。絶対 URL
を使用すると、この問題を解決できます。ただし、これは、www.my-domain.bike またはその他のサイトに展開する場合には理想的ではありません。より良いアプローチは、サイトのルートに対する相対 URL を使用することです