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.
Turns out the transition to TypeScript put some sort of cap on image file size; I tried using lower resolution images and that worked.