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,
  },
}

當上述設置時，真實圖像將按原樣提供，沒有任何大小變化。