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

qyzbxkaa 于 9个月前发布在其他

关注(0)|答案(2)|浏览(121)

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

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

字符串
以下是图像的外观（可能有点难以分辨，但Next/Image版本在我的显示器上明显更模糊）。

我注意到的其他一些信息

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

2条答案

Next.js在运行时创建图像的版本，并提供适当大小的图像来渲染。
如果你想退出：
1.您可以选择性地使用unoptimized属性：

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

字符串
或者，
1.在next.config.js中使用unoptimized选项：

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

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

默认情况下，Next.js中的图像质量设置为75。如果您想更改图像质量，可以通过将quality prop传递给Image组件来实现。例如，要将质量设置为100，用途：

<Image src="your-image-source" quality={100} alt="logo"/>

字符串
阅读这里：https://nextjs.org/docs/app/api-reference/components/image#quality