Next.js Image组件加载失败问题排查与解决求助

正确加载图片的两种方法 #

方法一：使用public目录绝对路径（推荐，保留图片优化） #

1. 确认图片author-image.jpg放在项目根目录的public文件夹（与app目录同级，不是app子目录下的public）
2. 导入Next.js的Image组件，代码中使用绝对路径作为src：

import Image from 'next/image';

export default function YourComponent() {
  return (
    <Image
      src="/author-image.jpg"
      width={200}
      height={200}
      alt="Michał Turczyn"
      loading="eager"
    />
  );
}

3. 检查next.config.js配置，确保图片优化功能正常：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: false, // 默认开启优化，不要随意设为true
  },
};

module.exports = nextConfig;

不要添加多余的domains或remotePatterns（仅在加载远程图片时需要），避免干扰本地图片处理。

方法二：导入本地图片文件（适合需获取图片元数据的场景） #

如果要通过导入方式使用，必须用相对路径指向public目录。比如你的组件在app/page.js，导入路径应为../public/author-image.jpg：

import Image from 'next/image';
import authorImage from '../public/author-image.jpg';

export default function YourComponent() {
  return (
    <Image
      src={authorImage}
      width={200}
      height={200}
      alt="Michał Turczyn"
      loading="eager"
    />
  );
}

这种方式下，Next.js会自动处理优化，还能通过authorImage.width获取原始图片尺寸。

问题出现的核心原因 #

1. 版本/路由模式差异：你之前的项目可能用的是旧版Pages Router（Next.js 12及更早），新项目用的是App Router（Next.js 13+），两者图片处理的配置逻辑有差异，App Router对优化的默认限制更严格。
2. 路径/文件名错误：图片没放在正确的public目录，或者文件名大小写与代码写法不匹配（Linux/macOS系统区分大小写）。
3. 导入方式错误：import '/author-image.jpg'是系统绝对路径（指向电脑根目录），不是项目根目录；import 'author-image.jpg'是相对当前组件的路径，找不到public下的图片。
4. 配置错误：next.config.js中误设images.unoptimized: true，或添加了不必要的domains/remotePatterns，导致图片优化服务异常。
5. 图片文件损坏：图片本身存在损坏，Next.js无法解析处理，返回Bad Request。

内容的提问来源于stack exchange，提问作者Michał Turczyn