Next.js“Image”与普通“img”标签中质量较低的图像

Question

我正在使用 Next.js，由于某种原因，当我使用Next/Image时，我的图像看起来有些模糊。

这是我的代码的样子：

  <img src={url} width={articleWidth} />
  <Image
    className="text-center"
    src={url}
    alt={alt}
    width={width}
    height={height}
  />

这是图像的样子（可能有点难以分辨，但Next/Image版本在我的显示器上显然更模糊）。

我注意到的其他一些信息

• 使用img标签的版本的固有大小为2016 x 1663 ，使用Next/Image的版本的固有大小为750x615

如何使Next/Image图像看起来像我的常规img组件一样清晰

Answer 1

Next.js 在运行时创建图像的版本并提供适当大小的图像进行渲染。

如果您想选择退出：

1. 您可以有选择地使用unoptimized的道具：

 <Image
    className="text-center"
    src={url}
    alt={alt}
    width={width}
    height={height}
unoptimized
  />

或者，

2. 使用next.config.js中的unoptimized选项：

module.exports = {
  images: {
    unoptimized: true,
  },
}

当上述设置时，真实图像将按原样提供，没有任何大小变化。