Next.js Image组件渲染报错：请求资源并非有效图片

Next.js 组件加载图片返回400错误排查 #

我正在学习Next.js基础教程，以下是教程代码的简化版本：

文件路径：/pages/posts/first-post.js

import Link from 'next/link';
import Head from 'next/head';
import Layout from '../../components/layout';
import Image from 'next/image';
import profilePic from '../../public/images/dp.jpg'


export default function FirstPost() {
    return (
        <Layout>
            <Head>
                <title>First Post Woottt</title>
            </Head>
            <h1>First Post</h1>
            <h2>
                <Link href="/">← Back to home</Link>
            </h2>
            <img src="/images/profile.jpg" alt="Your Name" />
            <Image src="/images/profile.jpg" width={100} height={100} />
            <Image src={profilePic} width={100} height={100} />
        </Layout>
    );
}

图片profile.jpg存放在app-root/public/images/profile.jpg，同时也复制到了app-root/public/profile.jpg。但使用Next.js 组件加载时始终返回400错误：

The requested resource isn't a valid image.

服务器端日志显示：

The requested resource isn't a valid image for /images/profile.jpg received text/html; charset=utf-8

我已经尝试过以下方法：

• 使用普通<img>标签替代Next.js <Image>，渲染完全正常；
• 将图片复制到public根目录并修改对应src链接，问题依旧；
• 通过import profilePic from '../../public/images/dp.jpg'导入图片并使用src={profilePic}，问题仍存在；
• 更换其他图片测试，无效。

可能的原因及调试步骤 #

1. 路由规则冲突
   若项目是Next.js 13+版本且混用了Pages Router和App Router，可能出现路由匹配错误。检查根目录是否存在app文件夹，临时重命名该文件夹后重启服务测试。

2. 中间件拦截请求
   检查项目中是否有middleware.js或pages/_middleware.js文件，这类自定义中间件可能错误拦截图片请求并返回HTML内容。临时移除中间件文件，重启服务后查看图片加载情况。

3. Next.js配置错误
   检查next.config.js中的配置，比如是否错误设置了images.remotePatterns或domains——即使是本地图片，错误配置可能导致Next.js将其当作远程资源处理。尝试重置配置为默认状态后测试。

4. 缓存或构建产物问题
   清理缓存和构建产物后重新构建：

   • 执行rm -rf .next（Linux/macOS）或rd /s /q .next（Windows）删除缓存目录；
   • 执行npm run build重新构建项目，再启动开发服务。

5. 静态资源服务配置问题
   若为部署后的环境，检查服务器（如Nginx）配置，确保public目录下的图片资源被正确映射，没有被错误路由到HTML页面。需保证静态资源的访问优先级高于路由转发。

6. 图片格式隐性问题
   普通<img>对图片兼容性更高，但Next.js Image组件会做严格的格式校验和优化。尝试用图片编辑工具重新导出图片（保存为标准JPG/PNG格式），或更换其他无损坏的图片测试。

内容的提问来源于stack exchange，提问作者Sid