Node.js反応でrequireメソッドでパスを使用するにはどうすればよいですか?

Question

require() メソッドを使用して、img タグ内の画像へのパスを貼り付けようとしています。

これがコンポーネントです。 console.log(img) が正しいパスを返すため、プロパティは親から正しく渡されます。

リーリー

json ファイルは次のようになります。

リーリー

すべてのフォルダー パスが正しいと確信しています。

パス を貼り付けてみましたが、うまくいきました。ただし、 または ${img})} alt="sth"/ >## ＃ できる。

json ファイルを

"img": require("../photo/photo.jpeg") に変更しようとしましたが、json ファイル エラーが発生しました。

ポップアップ エラー

モジュール '../photo/photo.jpeg' が見つかりません。

Answer 1

以下の投稿を参照して、.json ファイルを .js ファイルに変更することで、より簡単な解決策を見つけました。次に、投稿で示唆されているように、データを次のように変換しました。 リーリー

次に、先ほど使用したコンポーネントで

require でテンプレート リテラルを使用するにはどうすればよいですか? (require(`${somePath}`))

Answer 2

このエラーは、React の基礎となる Webpack が require() 関数でどのように動作するかに関連しています。 require() は標準の JavaScript 関数ではなく、Node.js および webpack によって提供される機能です。 require() ビルド プロセス中にモジュールの同期読み取りを実行します。つまり、webpack は実行時ではなくビルド時 (アプリケーションの実行前) にモジュール間の依存関係を知る必要があります。

したがって、require("../photo/photo.jpeg") を直接使用すると、パスは動的ではなく静的であるため、webpack はこのファイルをビルド パッケージに含めることを認識します。ただし、require(img) を使用しようとすると、コードが実行されるまで webpack はどのファイルを参照しているのかわかりませんが、もう手遅れです。

この場合、考えられる解決策を 2 つ提案します。

1. 動的インポートを使用する:

これは最新の JavaScript によって提供される機能であり、webpack もサポートしています。コンポーネントでこれを使用する方法は次のとおりです:

リーリー

これが正しく機能するには、JSON ファイル内でプロジェクトのルート ディレクトリへの相対パスを指定する必要があることに注意してください。

1. パブリック フォルダーを使用して画像を提供する: create-react-app を使用すると、イメージをパブリック フォルダーに配置できます。その後、パブリック フォルダーへの相対パスを介してこれらのイメージを参照できます:

リーリー

JSON ファイルでは、パブリック ディレクトリへのパスのみを指定する必要があることに注意してください。