Utiliser des images dans les fichiers CSS avec ReactJS

Question

J'ai une image à l'intérieur src/assets/images dans mon projet ReactJs. Comment puis-je l'utiliser dans un fichier CSS en tant qu'image de fond sans utiliser de chemins relatifs ?

J'ai ajouté jsconfig.json les src dans le dossier compilerOptions.baseUrl donc dans les fichiers js je peux faire :

import logo from 'assets/images/logo.svg'
<img src={logo} />

mais qu'en est-il des fichiers css ? J'ai plusieurs dossiers et j'aimerais éviter les chaînes de caractères laides comme

background-image: url(../../../assets/images/logo.svg)

J'utilise React 16.8.6

EDIT : J'ai utilisé create-react-app, donc je n'ai pas de fichiers webpack exposés et l'éjection devrait être évitée.

Answer 1

Vous pouvez utiliser (./) . Webpack lie automatiquement l'image par exemple:-

.user-background{
    background: url("./images/all-bg-title.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
  }

L'image ci-dessus (all-bg-title.jpg) se trouve dans le dossier /src/images/all-bg-title.jpg

Lien React Docs aquí

Answer 2

Envisagez d'utiliser Webpack pour le regroupement des actifs statiques, ce tutoriel pourrait vous aider : https://webpack.js.org/guides/asset-management/

En gros, 3 étapes :

1. Utilisez d'abord le chargeur de fichiers pour toutes les extensions d'images que vous souhaitez.

2. import votre image dans le fichier js.

3. Maintenant, le fichier CSS peut simplement obtenir l'url simplifiée

Mise à jour : Puisque vous ne voulez pas modifier le fichier de configuration de webpack, vous pouvez envisager de rendre votre image inline. Cela améliore les performances en ne créant pas une autre requête http pour l'image (seulement pour les images de petite taille).

Answer 3

Vous pouvez définir le chemin d'accès public / pour que le chemin des images soit résolu par rapport au chemin public donc si vous avez des images dans le chemin public il suffit de faire images/assets/asd.jph cela le résoudra avec le chemin public

Answer 4

Essayez d'utiliser le format svg pour les images, puis créez une classe react, puis créez un index.js dans lequel vous importerez tout dans un seul fichier, puis importez l'image où vous le souhaitez.