background: url(); not working

Author: EscapadoCreated Jun 3, 2017Updated May 14, 2019

Hey everyone,

I don't know if this is expected or if I am doing something wrong. I have a component Hero.tsx with import './Hero.css'; in it and in my Hero.css I have:

.hero{
    background-image: url('../images/hero-background.jpg');
    min-width: 100vw;
    height:500px;
}

I now get the following error

Failed to compile
./src/components/Hero.css
Module not found: Can't resolve '../images/hero-background.jpg' in '/Users/kevin.peters/test/my-app/src/components'
This error occurred during the build time and cannot be dismissed.

My folder structure is like this:

src 
| components
| | Header.tsx
| | Header.css
| images
| | hero-background.jpg
| App.tsx
| ...

Am I just screwing up the path? I put the file in my components folder and used url(hero-background.jpg) with quotes, without quotes, with and without ./ but it always gives me the same Type of error.

Source: microsoft/TypeScript-React-Starter