importowanie obrazów w stylu-React.js z komponentów

Question

Używam urządzone-komponenty i próbuję ustawić obraz tła Podobnie jak

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

Ja również próbował bez cudzysłowu, tak jak

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

W obu przypadkach ja uzyskać taki sam efekt

http://localhost:3000/assets/image.png Nie udało się załadować zasób: serwer odpowiedział ze statusem 404 (nie znaleziono)

Używam Richard Kall's react starter

Plik zdecydowanie znajduje się w podanej lokalizacji.

Czy ładuję niepoprawnie?

powinienem wspomnieć, jestem bardzo nowy w tym (React i stylu elementów składowych)

Answer 1

Należy importować obrazy w następujący sposób (zakładając, że masz WebPack skonfigurowany do importowania zasoby multimedialne).

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

/* ... */ 

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