React.js プロジェクトで画像パスを正しく処理するには?

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 (<img src={logo} alt="logo" />);
  }
}

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

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

以上がReact.js プロジェクトで画像パスを正しく処理するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。