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

Question

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

内置的图像组件的缺点使我选择了next-optimized-images包，它包括图像优化和其他优点作为内置的NextImage组件。

需要我创建一个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.

如何解决这个问题?提前感谢

Answer 1

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

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

然后，我用Gimp打开它，再次导出为PNG，它工作了。