Next/Image is not displaying images with 400 error

Support
1

I have read most, if not all, related posts to this issue. My application runs as expected on Vercel and local.

My app is https://next-rhythm-and-romance.netlify.app/, which is a next.js remake of my standard React app: https://rhythmandromancedjs.com/. I am swapping over to take advantage of the image optimization and SSR for SEO purposes.

I took a look at GitHub - netlify-templates/next-platform-starter: Modern starter based on Next.js 16 (App Router), Tailwind, and Netlify core primitives in attempt to spot any differences between our code relating to images, and I really couldn’t find any.

Example of Image component usage in https://next-rhythm-and-romance.netlify.app/djs:

<Image
    src={'/images/Headshot1.png'}
    alt="MC Patrick Headshot"
    style={{
        width: '100%',
        height: '100%',
        maxWidth: '280px',
        objectFit: 'cover',
        flexBasis: '30%',
        marginTop: isTabletView ? '-24px' : 0,
        marginBottom: isTabletView ? '-18px' : 0,
    }}
/>

Path of image: /public/images/Headshot1.png

All other images are imported at the top level, but was trying multiple meathods to determine if it was a formatting/structure issue.
Example also from the DJs page:

import Headshot2 from '../../assets/Headshot2.png';
...
<Image
    src={Headshot2}
    alt="DJ Patrick Headshot"
    style={{
        width: '100%',
        height: '100%',
        maxWidth: '280px',
        objectFit: 'cover',
    }}
/>

Path of image: /src/assets/Headshot1.png

Error from console (it is consistant across all images, despite if image is in src folder or public folder):

image
image642×236 6.48 KB

Error Message: The requested resource isn't a valid image.

I made my config files to match the provided example project. The only glaring difference which shouldnt matter is that my app folder exists within a src folder for consistancy with my previous React only version of the webapp. I.e., the app exists in /src/app and the public folder is still at the root, /public.

next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
};

export default nextConfig;

netlify.toml:

[build]
  publish = ".next"
  command = "pnpm run build-next"

Next version: ^15.0.1

If I need to share a link to my repository and make it public, I will.

I understand that the general accepted answer here is add the prop unoptimized={true} but I want to take advantage of the image optimization native to nextjs without swapping to vercel. It also looks like it is possible to accomplish given the example. My biggest indicator that something may be wrong or specific to the Netlify deployment is that images are rendering as expected on vercel.

Thank you.

2

You have a redirect rule to /index.html. Could you remove that?

3

Why would he remove that?? This is generally required to deploy on Netlify with Nextjs, due to issues with the way you load sites (I’ve had to change SSRed sites to static just to deploy before). That generally requires serving from an index.html entry point, or Netlify doesn’t find anything (dealt with this just yesterday on a new site that kept giving 404s on root and any other page - had to turn off ssr and include a redirect to index for it to deploy properly). Netlify seems to be a bit archaic in its ways, it should really offer better support for modern tech.

4

What’s the source of this information?