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 15 (App Router), Tailwind, daisyUI, 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?