web-dev-qa-db-fra.com

Fichier de référence dans les dossiers publics à partir de CSS dans create-react-app

J'utilise creat-react-app (CRA) et souhaite simplement inclure un fichier png placé dans le dossier public via CSS (j'y conserve tous les fichiers image). (J'ai seulement ajouté la ligne background-image à une application de l'ARC nouvellement générée):

.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

Comment référencer le fichier image depuis le fichier CSS sans copier quelque part dans /src? Je ne veux pas non plus éjecter l'application et me débarrasser du message d'erreur.

Edit: Cette question est différente de La restriction d’importations create-react-app en dehors du répertoire src car elle ne montre pas comment résoudre ce problème au niveau CSS. La solution proposée consiste à ajouter le style à l'intérieur du fichier JavaScript, ce que je ne souhaite pas faire.

node.jsreactjscreate-react-app
4
Hedge

La réponse est fausse. Utilisez simplement un/avant le nom, cela le rendra relatif à la racine de sortie de la génération, qui inclut tout ce qui se trouve dans le dossier public.

donc pour la question posée ci-dessus:

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

la partie critique étant

/example.png

fait référence à un fichier, example.png, qui se trouve dans le dossier public

1
DiamondDrake