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. 使用unoptimized以下选项next.config.js：

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

设置上述后，真实图像将按原样提供，没有任何尺寸变化。