Create React App で `src` ディレクトリの外にあるアセットをインポートするにはどうすればよいですか?

Create-React-App で Src ディレクトリ外のインポート制限を処理する方法

Create-React-App で外部からファイルをインポートするsrc ディレクトリは制限されています。この制限により、ソース ファイルが指定されたフォルダー内に確実に残り、より適切に整理され、不必要なインポートが防止されます。

次のエラー メッセージが表示された場合:

Module not found: You attempted to... import ../../public/images/logo/WC-BlackonWhite.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

インポートしようとしているということです。 src ディレクトリの外部からのイメージ。この問題には、いくつかのアプローチで対処できます。

1.アセットを Src ディレクトリに移動

イメージ ファイルを src ディレクトリに移動して、インポートできるようにします。これにより、すべての重要なファイルが指定されたソース フォルダー内に確実に存在します。

2.パブリック フォルダー アセットに URL を使用する

パブリック フォルダーからインポートする代わりに、絶対 URL または相対 URL を使用して、パブリック フォルダーから画像に直接アクセスします。このアプローチにより、インポート制限が回避され、src ディレクトリの外部からアセットにアクセスできるようになります。

重要な注意事項: 重複が発生する可能性があるため、パブリック フォルダーから直接インポートすることは避けることが重要です。ビルド内のアセットに影響を与え、アプリケーションの最適な読み込み効率に影響を与えます。 src フォルダーからインポートすると、webpack がファイルを効果的にバンドルし、サイズと読み込み速度を最適化します。

以上がCreate React App で `src` ディレクトリの外にあるアセットをインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。