Importieren von Bildern in React.js mit Stil-Komponenten

Question

Ich bin mit Stil-Komponenten und ich versuche, ein Hintergrundbild zu setzen, wie so

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

ich auch ohne die Anführungszeichen versucht habe, wie so

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

In beiden Fällen habe ich das gleiche Ergebnis

http://localhost:3000/assets/image.png fehlgeschlagen Ressource laden: der Server mit einem Status von 404 geantwortet (nicht gefunden)

Ich Richard Kall's react starter

Die Datei ist auf jeden Fall in der angegebenen Position.

Werde ich es falsch laden?

ich erwähnen sollte, bin ich zu dieser sehr neu (Reaktion, und gestylt-Komponenten)

Answer 1

Sie Bilder in der folgenden Weise importieren sollten (unter der Annahme, dass Sie webpack für den Import von Media Assets konfiguriert haben).

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

/* ... */ 

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