Google Chrome 上的 next.js 图像组件质量不佳

我正在使用 next.js 框架开发网站。我在 Google Chrome 中的图像组件有一些问题。它加载质量差。但是,当您从浏览器下载该图像时,它具有完美的质量。其他浏览器没有问题。

           <Image
              src={url}
              layout='responsive'
              quality={100}
              height={500}
              width={1250}
            />

我试图清除缓存,但没有帮助。也许 chrome 错误地告诉浏览器的大小。如何修复 chrome 中的图像质量?

stack overflow Poor next.js image component quality on Google Chrome
原文答案

答案:

作者头像

您可以添加 unoptimized={true} 属性,然后它将作为原始大小。在这里您可以找到有关 Nextjs Image 功能 Link 的更多信息。

您还可以将 priority 属性添加到您的图像中,然后它将提供优化的图像而不会影响质量。

<Image
 src={`/images/sample.png`}
 height={500}
 width={500}
 objectFit="cover"
 layout="fill"
 alt="carousel"
 priority
/>