如果布局属性值“响应”，那么Next.js新的Image组件如何检测设备大小？

如何解决如果布局属性值“响应”，那么Next.js新的Image组件如何检测设备大小？

它可以很好地在桌面上检测当前视口大小。 但是，如果我在Chrome Dev Tools移动视图上进行了模拟，则Image组件会检测到错误的设备尺寸。 我想知道图像组件如何检测设备尺寸。

解决方法

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

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

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

,

您需要检查您的 devicePixelRatio。

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

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

,

“图片”组件无法检测设备尺寸。它将生成一个具有<img/>预设属性的srcset。浏览器将读取此值，并为当前视口加载适当大小的图像（请参见article）。

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

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