You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js 15中next/image组件加载本地public图片返回400 Bad Request错误求助

Next.js 15中next/image组件加载本地public图片返回400 Bad Request错误求助

大家好,我最近在做一个Next.js 15 App Router项目时遇到了个头疼的问题——所有放在public文件夹里的本地图片都加载不出来,用next/image组件的话控制台一直报400 Bad Request错误,而且不是404(我反复确认过图片确实在对应的路径里)。外部来源的图片倒是能正常加载,就是本地的不行,已经试了各种方法都没解决,想请教下有没有朋友遇到过类似情况或者有什么排查思路?

我的项目情况

  • 项目基于Next.js 15 App Router,搭配TailwindCSS + daisyUI(另一个没加daisyUI的Next.js项目是正常的,不确定是不是这个依赖的问题)
  • 图片都放在public根目录下,用根相对路径比如/my-image.png引用
  • 核心依赖版本:Next.js 15.3.3,React 19.1.0

我已经尝试过的解决方法

  • 切换next/image的相对/绝对路径,甚至试过用原生<img>标签、legacy版本的Image组件,结果都是一样的400错误
  • 折腾next.config.js:试过配置images.domains、assetPrefix、basePath,外部图片能正常工作,但本地的还是不行
  • 关掉Turbopack启动开发服务器,问题依旧
  • 换了多种图片格式:jpg、jpeg、png都试过,结果一致
  • 清空.next文件夹、重新安装node_modules,没用
  • 部署到Vercel上测试,还是同样的400错误
  • 多次确认图片路径正确性,比如public/logo.jpg确实存在,没有出现404提示

示例代码

我写的一个Logo组件:

import Image from "next/image";

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

我的项目依赖

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

几个关键细节

  • 图片确实存在,路径完全正确,没有404,只有400 Bad Request
  • 配置过images.domains的外部域名图片能正常加载
  • 另一个没有daisyUI的Next.js 15项目本地图片是正常的,会不会是daisyUI和Next.js 15的静态资源处理有冲突?

实在是找不到原因了,有没有朋友能给点建议?感激不尽!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 10:04:52