Next.js项目图片导入报错：「不是有效图片文件」问题求助

排查与修复步骤 #

• 重新安装sharp依赖
  最新版Next.js依赖sharp处理图片，全量更新包后可能出现依赖不兼容或安装不完整的情况。执行以下命令强制重装：

  yarn add sharp --force
  

  若无效，先卸载再重新安装：

  yarn remove sharp
  yarn add sharp
  

• 确认图片文件与路径
  即使是标准PNG，也可能存在隐性问题：

  • 检查路径大小写（Linux/macOS环境严格区分大小写），确保导入路径和实际文件路径完全一致
  • 用系统自带的图片工具（比如画图、预览）重新导出该图片，排除文件损坏或格式伪装的可能

• 检查next.config.js的图片配置
  新版Next.js的图片配置可能限制了格式或优化规则，确保next.config.js中包含PNG格式支持：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      formats: ['image/png', 'image/jpeg', 'image/webp'],
      // 若不需要图片优化，可尝试开启unoptimized模式
      // unoptimized: true,
    },
  }
  
  module.exports = nextConfig
  

• 清除缓存后重新构建
  更新包后的残留缓存可能导致异常，执行以下命令清理后重启服务：

  yarn cache clean
  rm -rf .next
  yarn dev
  

• 修复TypeScript类型定义（若使用TS）
  之前的类型错误更新后可能影响图片导入的类型识别，在项目根目录的types文件夹下创建images.d.ts文件，内容如下：

  declare module '*.png' {
    const value: string;
    export default value;
  }
  

  同时确保tsconfig.json中包含该类型文件的引用：

  {
    "compilerOptions": {
      "typeRoots": ["./types", "./node_modules/@types"]
    }
  }
  

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