Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance?
This code snippet will work:
const style={
width:'300px',
height:'200px',
backgroundImage: 'url(pictures/backgroundPics/1.jpg)'
}
const Test =()=>(
<div style={style}/>
)
However, this won't:
import './test.css'
const Test =()=>(
<div className='test'/>
)
CSS:
.test{
background-color: gray;
width: 300px;
height: 200px;
background-image: url(../../public/pictures/randomPics/1.jpg)
}
I've attempted various ways to set my CSS path, including relative to the CSS file or HTML file, but I keep encountering errors like "module not found" or parse errors. My Test component's path is src/test/test.js and my CSS file is in the same test folder. I am using css-loader v0.28.4.
It does work if I use a web address as the URL:
background-image: url(http://www.pvhc.net/img226/gzypyldoqaxjhvtyyhei.png)