解决Next.js使用next-optimized-images时出现的‘Input buffer contains unsupported image format’错误

我之前切换到next-optimized-images时也碰到过一模一样的报错，给你几个逐步排查的方向，应该能解决问题：

1. 先排查图片本身的问题 #

这个报错最常见的原因就是图片文件有问题，或者格式不被支持：

• 先确认你的dashboard-on-mobile-and-desktop-screen.png是不是标准的PNG格式，有没有损坏？可以用系统自带的图片查看器打开试试，或者换一张确定没问题的PNG/JPG图片替换进去，看报错是否消失。
• 注意next-optimized-images默认支持的格式是JPG、PNG、WebP、GIF这些，如果你用了HEIC这类小众格式，肯定会报错。

2. 检查依赖是否安装完整 #

next-optimized-images依赖很多底层的图片处理工具，有时候npm安装会漏掉这些依赖：

• 先删掉依赖缓存和重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 如果还是不行，可以手动安装核心的图片处理依赖：

  npm install sharp pngquant-bin jpegtran-bin webp-bin --save-dev
  

  这些包分别负责不同格式的图片优化，确保它们都安装成功。

3. 调整next.config.js的配置 #

有时候默认配置和你的项目不兼容，试试修改这些选项：

• 先暂时注释掉你添加的SVG处理规则，看看是不是和next-optimized-images的SVG处理冲突了：

  const withOptimizedImages = require('next-optimized-images');
  module.exports = withOptimizedImages({
    reactStrictMode: true,
    // 暂时注释下面这段，测试是否报错
    // webpack(config) {
    //   config.module.rules.push({
    //     test: /\.svg$/,
    //     use: ["@svgr/webpack"]
    //   });
    //   return config;
    // },
  });
  

• 如果注释后没问题，说明SVG处理规则冲突了，你可以指定next-optimized-images不处理SVG，或者调整webpack规则的优先级。
• 另外，可以明确指定支持的图片格式，并关闭开发环境的图片优化试试（默认开发环境是关闭的，但有时候手动设置更稳妥）：

  module.exports = withOptimizedImages({
    reactStrictMode: true,
    optimizeImagesInDev: false, // 开发环境禁用图片优化
    images: {
      formats: ['image/png', 'image/jpeg', 'image/webp'],
    },
    // 其他配置...
  })
  

4. 简化Img组件的使用 #

先排除组件使用的问题：

• 去掉sizes属性，用最简单的方式调用组件：

  import Img from 'react-optimized-image';
  import HeroImage from '../../../public/images/dashboard-on-mobile-and-desktop-screen.png'
  export default function Hero(){
    return (
      <>
        <Img src={HeroImage} />
      </>
    )
  }
  

• 确认图片路径是否正确，有没有拼写错误，比如public/images下确实存在这个图片文件。

5. 检查babel配置 #

确认你的.babelrc配置没有拼写错误，插件名称是否正确：

{ "presets": ["next/babel"], "plugins": ["react-optimized-image/plugin"] }

如果你的next-optimized-images版本比较新，也可以试试把插件换成next-optimized-images/babel，不过官方文档里写的是前者，先确认版本对应。

按这个顺序排查下来，应该能找到问题所在。我当时是因为图片文件损坏，重新导出了一张图片就解决了。

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