create-react-app を使用しています。 内のファイルから public フォルダーの画像を呼び出そうとしていますsrc/components。このエラー メッセージが表示されます。
./src/components/website_index.js モジュールが見つかりません: プロジェクトの src/ ディレクトリ外にある ../../public/images/logo/WC-BlackonWhite.jpg をインポートしようとしました。src/ 外の相対インポートはサポートされていません。src/ 内に移動するか、プロジェクトの node_modules/ からシンボリックリンクを追加することができます。
import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />
パスへのインポートが可能であるという記事をたくさん読みましたが、それでもうまくいきません。どなたか助けていただければ幸いです。このような質問がたくさんあることは承知していますが、すべてロゴや画像をインポートするように言われているので、全体像を見失っているのは明らかです。
ベストアンサー1
ModuleScopePluginこれは、create-react-app の開発者によって追加された特別な制限です。ファイルが に存在することを保証するために に実装されていますsrc/。このプラグインは、アプリのソース ディレクトリからの相対インポートが の外部に到達しないことを保証します。
ejectwebpack config を使用して変更する以外に、この機能を無効にする公式の方法はありません。
ただし、ほとんどの機能とその更新は、create-react-app システムの内部に隠されています。作成すると、eject新しい機能とその更新がなくなります。したがって、webpack などを構成するために含まれるアプリケーションを管理および構成する準備ができていない場合は、操作を実行しないでくださいeject。
既存のルールに従ってください - アセットを src に移動するか、publicインポートせずにフォルダー URL に基づいて使用します。
しかし、代わりにeject多くの非公式の解決策があり、再配線これにより、 を使用せずにプログラムで webpack 構成を変更できますeject。ただし、プラグインを削除するのは良くありません。これにより、一部の保護が失われ、 で利用できる機能が追加されなくなります。は複数のフォルダーをサポートするように設計されています。ModuleScopePluginsrcModuleScopePlugin
より良い方法は、srcによって保護されているに似た完全に機能する追加ディレクトリを追加することですModuleScopePlugin。これは次のように実行できます。反応アプリエイリアス
とにかく、フォルダーからインポートしないでくださいpublic。フォルダー内で重複しbuild、2 つの異なる URL (および異なる読み込み方法) で利用可能になり、最終的にパッケージのダウンロード サイズが悪化します。
フォルダーからのインポートは推奨されており、利点もあります。すべてが webpack によって最適なサイズsrcのチャンクでバンドルにパックされ、読み込み効率が最大限に高まります。