Image component not working in my app - Receiving 400 bad request

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)

Image of console error

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 <img> 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.

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"
  }

The issue was that my middleware was running on requests for static assets like /image.png, which weren't being handled properly because my logic only accounted for assets under /_next/. I fixed it by exporting a matcher config to exclude those static asset paths from triggering the middleware in the first place. Read more about it here

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