错误：尝试使用 Next JS next-optimize-image 时，输入缓冲区包含不支持的图像格式答案

【问题标题】：Error: Input buffer contains unsupported image format when trying to use Next JS next-optimize-image错误：尝试使用 Next JS next-optimize-image 时，输入缓冲区包含不支持的图像格式
【发布时间】：2021-09-29 13:25:44
【问题描述】：

我在我的 Next JS 应用程序中使用默认组件来优化图像，但发现如果使用默认图像优化组件，除了 Vercel 之外，该站点无法托管在其他任何地方。除此之外，该网站也无法导出以托管在其他网络托管平台上。

内置图像组件的缺点使我想到了 next-optimized-images 包，其中包括图像优化和其他好处，作为内置的 Next Image 组件。

这需要我创建一个babel.rc，配置如下：

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

我还将next.config.js 修改为以下内容：

const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages({
  /* config for next-optimized-images */

  // your config for other plugins or the general next.js here...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  },
  reactStrictMode: true,
});

next-optimized-image 内置的Img 组件可以这样使用：

import Img from 'react-optimized-image';
// react-optimized-image is specified in the docs explicitly
import HeroImage from '../../../public/images/dashboard-on-mobile-and-desktop-screen.png'

export default function Hero(){
  return (
    <>
      <Img  src={HeroImage} sizes={[614]}/>
    </>
  )
}

完成所有这些操作并运行 npm run dev 后，我的控制台中出现以下错误：

(node:22516) UnhandledPromiseRejectionWarning: Error: Input buffer contains unsupported image format
(Use `node --trace-warnings ...` to show where the warning was created)
(node:22516) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by 
rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:22516) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

我该如何解决这个问题？提前致谢

【问题讨论】：

这是否回答了您的问题：Nextjs: TypeError: unsupported file type: undefined after update to v.11？尝试将images: { disableStaticImages: true } 添加到您的next.config.js。

标签： javascript node.js reactjs next.js image-optimization

【解决方案1】：

PNG 图像我遇到了同样的问题。

首先，我只是用 Paint 打开它并再次将其保存为PNG。我可以看到 git 发生了一些变化，但我仍然遇到同样的错误。

然后，我用 Gimp 打开它并再次将其导出为 PNG 并且它起作用了。

【讨论】：