reactjs - 如果布局道具值是“响应式”，Next.js 新图像组件如何检测设备大小？

Question

在桌面上，它会正确检测当前视口大小，但如果我在 Chrome 开发工具上模拟移动视图，该Image组件会检测到错误的设备大小。

我想知道Image组件如何检测设备大小。

Answer 1

“图像”组件不检测设备大小。它生成一个<img/>带有预设srcset属性。浏览器读取此值并为当前视口加载适当大小的图像（参见文章）。

由于缓存，您可能会在 DevTools 中看到不一致。如果浏览器下载了更大的图像，然后您缩小视口并更新页面，它仍然会为“错误”视口检索缓存的图像。

硬重装是不够的。切换视口大小后尝试使用“清除缓存并重新加载”。

Answer 2

您可以使用 deviceSizes 属性指定设备宽度断点列表。当 next/image 组件使用 layout="responsive" 或 layout="fill" 时使用这些宽度，以便为访问您网站的设备提供正确的图像。

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

另请参阅：https ://nextjs.org/docs/basic-features/image-optimization

Answer 3

您需要检查您的 devicePixelRatio。

当加载的图像总是我的视口大小的两倍时，我也感到困惑。

我认为浏览器决定在我的情况下加载最接近viewportwidth * devicePixelRatio的图像devicePixelRatio = 2。