While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements.
I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to the component itself?
Below is a simple component function I have created for testing purposes:
import React from 'react'
const TestComponent = (props) => {
return (
<div>
<h1 className="test">See my background</h1>
<style jsx>{`
.test {
background-image: url("someImageFile.jpg");
}
`}</style>
</div>
)
}
export default TestComponent
However, this setup triggers a 404 error with the URL "localhost:3000/current page/someImageFile.jpg".