require()メソッドを使用して、imgタグ内の画像へのパスを貼り付けようとしています。
これがコンポーネントです。console.log(img)が正しいパスを返すため、プロパティは親から正しく渡されます。
json ファイルは次のようになります。
リーリーすべてのフォルダー パスが正しいと確信しています。
パスまたは
${img}
)} alt="sth"/ >## ＃ できる。
json ファイルを"img": require("../photo/photo.jpeg")に変更しようとしましたが、json ファイル エラーが発生しました。
ポップアップ エラーモジュール '../photo/photo.jpeg'が見つかりません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
以下の投稿を参照して、
次に、先ほど使用したコンポーネントで.jsonファイルを.jsファイルに変更することで、より簡単な解決策を見つけました。次に、投稿で示唆されているように、データを次のように変換しました。 リーリーrequire でテンプレート リテラルを使用するにはどうすればよいですか? (require(`${somePath}`))
このエラーは、React の基礎となる Webpack が
require()関数でどのように動作するかに関連しています。require()は標準の JavaScript 関数ではなく、Node.js および webpack によって提供される機能です。require()ビルド プロセス中にモジュールの同期読み取りを実行します。つまり、webpack は実行時ではなくビルド時 (アプリケーションの実行前) にモジュール間の依存関係を知る必要があります。したがって、
require("../photo/photo.jpeg")を直接使用すると、パスは動的ではなく静的であるため、webpack はこのファイルをビルド パッケージに含めることを認識します。ただし、require(img)を使用しようとすると、コードが実行されるまで webpack はどのファイルを参照しているのかわかりませんが、もう手遅れです。この場合、考えられる解決策を 2 つ提案します。
これは最新の JavaScript によって提供される機能であり、webpack もサポートしています。コンポーネントでこれを使用する方法は次のとおりです:
リーリーこれが正しく機能するには、JSON ファイル内でプロジェクトのルート ディレクトリへの相対パスを指定する必要があることに注意してください。
- パブリック フォルダーを使用して画像を提供する:
リーリーcreate-react-appを使用すると、イメージをパブリック フォルダーに配置できます。その後、パブリック フォルダーへの相対パスを介してこれらのイメージを参照できます:JSON ファイルでは、パブリック ディレクトリへのパスのみを指定する必要があることに注意してください。