next/image fails to work when converting project from JavaScript to TypeScript

Question

I'm working on converting my personal website from a Next.js JavaScript to TypeScript project. Previously I had a placeholder background image loaded with the next/image system:

<Image
    src="/filename.jpg"
    layout="fill"
    objectFit="cover"
    quality={100}
/>

I am not using a loader at the moment. This successfully loaded, if a bit slow. I moved to TypeScript with no changes to that line or related lines, but am now getting a 502 (Bad Gateway) error when attempting to load the image.

If I modify the URL to a nonexistent file like "/falename.jpg" then I instead get a 400 (Bad Request) error. That seems to indicate that the file access is fine, but it's somehow not loading correctly in TypeScript only.

Is there some setup step that I am missing? I've combed through all of Next.js's next/image and TypeScript guides and haven't noticed anything of the sort.

Answer 1

Turns out the transition to TypeScript put some sort of cap on image file size; I tried using lower resolution images and that worked.