React.js での画像パスの正しいアプローチ

React.js プロジェクトでの画像の正しいパスを決定することは、一般的な課題でした。従来、プロジェクトのファイル構造に基づいて、src 属性内で相対パスが使用されていました。ただし、create-react-app で構築された React.js プロジェクトでは、このアプローチが常に機能するとは限りません。

これは、ルートが「/details/2」の場合に画像が正しく表示される例から明らかです。 " ただし、"/details/2/id" の場合はそうではありません。この不一致は、相対パスがファイル アーキテクチャではなく URL 構造に基づいて解釈されるために発生します。

この問題を解決するには、React.js プロジェクトで画像パスを定義する別の方法をお勧めします。 src 属性で相対パスを使用する代わりに、import ステートメントを使用して画像をインポートできます。例:

import logo from './logo.png';

class Nav extends Component {
  render() {
    return ();
  }
}

このアプローチでは、import ステートメントで画像ファイルへの相対パスを指定し、画像は変数として保存されます。コンポーネントをレンダリングするとき、この変数は画像のソースとして使用されます。

このメソッドにより、インポート プロセス中に相対パスが確立されるため、React-router によって処理されるさまざまなルート間で画像パスの一貫性が保たれます。現在の URL 構造に基づいていません。その結果、アクセスされる特定のルートに関係なく、すべての画像が正しく表示されます。