web-dev-qa-db-ja.com

create-react-appのCSSからのパブリックフォルダー内の参照ファイル

私はcreat-react-app（CRA）を使用していて、CSSを介してパブリックフォルダーに配置されたpngファイルを含めたいだけです（すべての画像ファイルをそこに保持します）。現在、CSSを介してこの画像を参照しようとしています（新しく生成されたCRAアプリにbackground-image行を追加しただけです）。

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("../public/example.png");
}

You attempted to import example.png which falls outside of the project src/ directory

CSSファイル内から/src内のどこかにコピーせずに画像ファイルを参照するにはどうすればよいですか？また、アプリケーションをイジェクトしてエラーメッセージを削除したくありません。

編集：この質問は、CSSレベルでこの問題を解決する方法を示していないため、 create-react-appがsrcディレクトリの外部に制限をインポートする とは異なります。提案された解決策は、JavaScriptファイル内にスタイルを追加することです。

node.jsreactjscreate-react-app
12
Hedge

名前の前に/を使用するだけで、パブリックフォルダ内のすべてのものが含まれるビルド出力ルートからの相対になります。

上記の質問の場合：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

重要な部分は

/example.png

パブリックフォルダーにあるファイルexample.pngを参照します

7
DiamondDrake

相対パスの余分な..を削除します。 :)

0
Faizuddin Mohammed