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
相关产品推荐
相关产品推荐

