NextJS Image loading only in Firefox

Images will only load in Firefox and nowhere else.

Here's my import

import gradient from '../public/mountains/gradient.svg'

And here's the Image component

<div id='gradient' className={`${styles.bgimage} ${styles.gradient}`}><Image src={gradient}></Image></div>

This is what it shows in Firefox devtools:

And this is what it shows in Chrome devtools:

But the weird thing is when I click the link in "Current source:" in Chrome's devtools it shows the image correctly. And another weird thing is that images on the footer load properly

I have tried using the img tag and background-image but that just says 404 Not Found. So I don't know what I'm doing wrong.