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

Question

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

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

标签： reactjsimagenext.jsnextjs-image

Answer 1

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

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

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