web-dev-qa-db-fra.com

importation d'images dans React.js avec des composants de style

J'utilise des composants de style et j'essaie de définir une image d'arrière-plan comme ça

const HeaderImage= styled.div`
    background-image: url('../../assets/image.png');
';

J'ai aussi essayé sans les guillemets, comme ça

const HeaderImage= styled.div`
        background-image: url(../../assets/image.png);
 ';

Dans les deux cas, j'obtiens le même résultat

http: // localhost: 3000/assets/image.png Échec du chargement de la ressource: le serveur a répondu avec un état de 404 (introuvable)

J'utilise le démarreur réactif de Richard Kall

Le fichier se trouve définitivement à l'emplacement spécifié.

Suis-je en train de le charger incorrectement?

Je dois mentionner que je suis très nouveau dans ce domaine (React et styled-components)

reactjsstyled-components
14
vedran

Vous devez importer des images de la manière suivante (en supposant que vous avez configuré le webpack pour importer des ressources multimédias).

import myImage from '../../assets/image.png';

/* ... */

const HeaderImage = styled.div`
  background-image: url(${myImage});
`;
40
Ilja