J'ai vu que certaines choses ne fonctionnent pas de la même manière dans le style en ligne de réaction CSS par rapport au style de feuille externe CSS. J'avais un problème avec l'ajout d'une image d'arrière-plan à mon application de réaction. Je n'ai pas pu le faire compiler via la méthode CSS normale. Il semblait que cela ne pouvait pas se résoudre.

J'ai fini par utiliser une approche de style en ligne qui a fonctionné. Je ne suis pas sûr que ce soit le moyen le plus efficace d'ajouter des images d'arrière-plan.

Quelle est la meilleure façon d'ajouter des images d'arrière-plan à réagir, en ligne ou en externe.

Code de travail:

App.js

import './App.css';
import PorfileCard from './PorfileCard';

function App() {
  const mystyle = {
    backgroundImage: "url(/images/bg-pattern-top.svg)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat"
    
  }
  return (
    <div style={ mystyle }>
     <PorfileCard/>
    </div>
  );
}

export default App;

File Structure in React Images in public folder

Aucun code de travail via CSS externe

App.css

body {
  margin: 0;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  background-color: (var(--darkCyan));
  background-image: url("images/bg-pattern-top.svg");
}

J'ai essayé avec la barre oblique principale et en supprimant les guillemets. J'ai la même erreur.

Error in React

0
PythonCoder1981 12 mars 2021 à 23:06

1 réponse

Meilleure réponse

Mettez votre dossier images dans le répertoire `` public '' comme mentionné dans les commentaires et pour accéder à ces images, utilise:

process.env.PUBLIC_URL

Exemples :

<div style={{ background: `url(${process.env.PUBLIC_URL)/images/bg-pattern-top.svg` }}>
</div>



<img src={process.env.PUBLIC_URL + /images/bg-pattern-top.svg} alt="" />
1
MB_ 13 mars 2021 à 17:12