Google Chrome 上的 next.js 图像组件质量较差

Question

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

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

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

Answer 1

您可以添加unoptimized={true}属性，然后它将按原始大小提供。在这里您可以找到有关 Nextjs Image 功能的更多信息链接。

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

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