Images are not loading due to 400 error

[devdogfish]

I'm using Next.js and running into an issue where none of my images are loading. I'm using the component from next/image, and every image gives this error in the console:

Failed to load resource: the server responded with a status of 400 (Bad Request) I've been stuck on this for a couple of days and can't figure out what's wrong.

My setup:

• Next.js 15 app router project
• Using the next/image component
• Images are stored in the public folder, and I'm referencing them using relative paths like /my-image.png
• I’m also using daisyUI (on top of TailwindCSS), but I’m not sure if that’s related
• I have another Next.js project without daisyUI where it works completely fine

What I've tried:

• Using absolute and relative paths in the src prop of the component
• Switching between the new next/image, the legacy version, and regular HTML tags
• Tweaking next.config.js (including experimenting with images.domains, assetPrefix, and basePath), images from external sources work, but not local ones
• Running the development server also without turbopack.
• Different image formats such as jpg, jpeg, png.
• Clearing .next and reinstalling node modules
• Making a deployment on Vercel

Example code:

import Image from "next/image";

export default function YDALogo({ className }: { className?: string }) {
  return <Image src="/logo.jpg" alt="App logo" width={500} height={500} />;
}

I confirmed that the image exists in public/my-image.png, and I'm not getting any 404s — just a 400 Bad Request error.

Has anyone run into this or have any ideas what I might be missing? I’m completely stuck.

These are my dependencies:

"dependencies": {
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@prisma/client": "^6.10.1",
    "@types/bcrypt": "^5.0.2",
    "bcrypt": "^6.0.0",
    "clsx": "^2.1.1",
    "crypto": "^1.0.1",
    "next": "15.3.3",
    "next-auth": "^4.24.11",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "resend": "^4.6.0",
    "tailwind-merge": "^3.3.1",
    "use-debounce": "^10.0.5",
    "zod": "^3.25.67"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3.3.1",
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/postcss": "^4.1.10",
    "@types/node": "^20.19.1",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "daisyui": "^5.0.43",
    "eslint": "^9.29.0",
    "eslint-config-next": "15.3.3",
    "prisma": "^6.10.1",
    "tailwindcss": "^4.1.10",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.3"
  }

[icyJoseph]

Interesting. Do you have a middleware file?

[devdogfish]

Okay adding a rejex config seems to fix it, but only if I hardcode the file extensions.
Is this good or too strict? Should I just allow all things that start with /_next instead?

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp|avif|ico|woff|woff2|ttf|otf|eot)$).*)",
  ],
};

[icyJoseph]

This is a bit weird, but the first request, does something like:

/_next/image?url=%2Flogo.jpg&w=1080&q=75
/logo.jpg 

It might be worth changing to this kind of middleware:

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     * - ignore /<path>.jpg files
     */
    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|.*.jpg).*)',
  ],
}

[devdogfish]

Ok your config only works for jpg for me so I added some other extensions to get it to work for all my images and this works:
"/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|.*.jpg|.*.png|.*.jpeg).*)"

Thanks a lot for the help!

[PALLAVIKHEDLE]

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt|.*\\.[^/]+$).*)",
  ],
}

.*\\.[^/]+$ is a regex that matches anything with a file extension (e.g., .jpg, .png, .css, .woff2, .webmanifest, etc.).

[PALLAVIKHEDLE]

It skips anything that ends with .ext, regardless of the extension. So you don’t need to maintain a growing list of formats.

[PALLAVIKHEDLE]

Next.js 15 has some stricter behaviors with next/image.
1. Temporary Solution: You can try using a normal <img> element.
You do not need to import img.

{/* eslint-disable-next-line @next/next/no-img-element */}
<img
  src={thumbnailUrl}
  alt={`Thumbnail for ${item.name || 'item'}`}
  className={`${styles.thumbnail} ${isEnlarged ? styles.thumbnailEnlarged : ''}`}
  onLoad={() => setImageLoaded(true)}
  onError={(e) => {
    console.error(`Failed to load thumbnail: ${thumbnailUrl}`);
    (e.target as HTMLImageElement).alt = 'Thumbnail not available';
    setImageLoaded(false);
  }}
/>

If this works, the issue is specifically with next/image handling.

2. Disable Image Optimization
Temporarily disable next/image optimization to see if that’s the culprit. In next.config.js:

module.exports = {
  images: {
    unoptimized: true,
  },
};

If this works, the problem is with the optimizer - possibly conflicting with how next dev serves images in your environment.

[devdogfish]

Thank you for the detailed temporary fix! I found a simpler workaround which is just to statically import the image and pass that to the src prop and it works like that. But I would really love to just pass the public-relative-path directly for my images

This works:

import Image from "next/image";
import imgSrc from "@/public/auth_layout.jpeg";
// ...
<Image
  src={imgSrc}
  alt="My alt"
  fill
  priority
  className="object-cover pointer-events-none"
  sizes="(max-width: 768px) 100vw, 100vw"
/>

This doesn't work:

import Image from "next/image";
// ...
<Image
  src="/public/auth_layout.jpeg"
  alt="My alt"
  fill
  priority
  className="object-cover pointer-events-none"
  sizes="(max-width: 768px) 100vw, 100vw"
/>

Thank you

[PALLAVIKHEDLE]

Ah got it - that makes sense! The reason src="/public/auth_layout.jpeg" doesn’t work is because you should leave out the /public part. Next.js serves files from the public/ folder as if they're at the root.
Try to use

src="/auth_layout.jpeg"

That should work perfectly with next/image (or even a regular <img> tag), as long as the file is actually in the public/ folder at the project root. Static imports work because Webpack handles them directly - but public-relative paths need to follow the URL structure Next.js expects.

[icyJoseph]

They had also tried this in their original post.

[PALLAVIKHEDLE]

Ah yes - my bad.

[devdogfish]

You're right that was a small error in my answer there, but I have indeed tried it without /public

[Ren-Logronio]

this does not work