Images are loading only in Firefox and not anywhere else.
Here is the import statement:
import gradient from '../public/mountains/gradient.svg'
And here is the Image component:
<div id='gradient' className={`${styles.bgimage} ${styles.gradient}`}><Image src={gradient}></Image></div>
When inspected in Firefox devtools, it shows this:
https://i.stack.imgur.com/RS2t5.png
However, when inspected in Chrome devtools, it shows this:
https://i.stack.imgur.com/9Ohhg.png
An interesting observation is that clicking on the link under "Current source:" in Chrome's devtools displays the image correctly. Additionally, images in the footer load properly as well.
I attempted using both the img tag and background-image, but both resulted in a "404 Not Found" error message. I am unsure of what mistake I may be making.