如何根据屏幕尺寸更改Next/Image？

Question

我有一个具有多个图像的英雄，我想根据屏幕尺寸显示图像，例如，如果用户使用大屏幕，英雄将加载大/宽图像，如果他使用手机，英雄将加载显示宽度不适合屏幕的不同图像。我不知道如何使用 nextjs 执行此操作，无法指定在不同屏幕上加载哪个图像。

Answer 1

我确实使用 nextjs 的 useMediaQuery { const mobile = useMediaQuery(theme.breakpoints.down('sm')); 解决了问题 }，但结果并不完美，因为如果你使用移动设备？[....] : [....] 您无法向图像组件添加“优先级”，如果您尝试添加它，它将首先加载两个图像，然后执行条件语句以隐藏一个图像。所以你必须牺牲这一点。