Next.js图片无法显示问题求助：图片未被识别显示破损图标

• 核对图片路径与导入方式
  本地图片若使用next/image组件，优先用ES模块导入：

  import Image from 'next/image';
  import avatar from '../public/avatar.png';
  
  export default function Profile() {
    return <Image src={avatar} alt="用户头像" width={100} height={100} />;
  }
  

  放在public目录下的图片也可直接用绝对路径（如/avatar.png），但要注意路径拼写、大小写（类Unix系统区分大小写），避免多写/漏写目录层级。

• 配置next/image组件规则
  若加载外部图片，需在next.config.js中添加允许的域名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      domains: ['example.com'],
    },
  };
  
  module.exports = nextConfig;
  

  本地图片要确保width和height属性正确，或用fill属性配合相对定位的容器实现自适应：

  <div style={{ position: 'relative', width: '100%', height: 300 }}>
    <Image src="/banner.jpg" alt="横幅" fill className="object-cover" />
  </div>
  

• 检查文件与目录合法性
  确保图片文件名无特殊字符，文件权限为可读取状态；确认public目录存在且未被误改名，静态资源需放在该目录下（自定义静态目录需在next.config.js中配置images.unoptimized或assetPrefix）。

• 清除缓存重启服务
  删除项目根目录下的.next文件夹，重新执行npm run dev，避免缓存导致的路径识别异常。

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