Importing images into React.js with stylized components

Question

I use stylized components and try to set the background image this way

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

I also tried without quotes, like so

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

In both cases, I get the same result

http: // localhost: 3000 / assets / image.png Failed to load the resource: the server responded with a status of 404 (not found)

I use Richard Cull meets starter

The file is definitely located at the specified location.

Am I loading it incorrectly?

I should mention that I'm very new to this (React and stylized components)

Answer 1

You must import the images as follows (provided that you have a web package configured to import media assets).

 import myImage from '../../assets/image.png'; /* ... */ const HeaderImage = styled.div` background-image: url(${myImage}); `;