Nextjs Image组件srcSet属性

Question

我想为移动视口加载不同的图像。基于 Next.js 文档传递srcSet不起作用，那么我该怎么做呢？

现在我可以使用 CSS 显示属性来做到这一点，但我需要如下所示的内容：

<Image
   srcSet={{
      '/path/to/image-small.jpg': 320,
      '/path/to/image-medium.jpg': 640,
      '/path/to/image-large.jpg': 1024,
   }}
   src={data.smallImg.url}
   fill={true}
   alt=""
   className="rounded-[10px]"
/>

Answer 1

该<Image />组件会自动生成您的 srcSet，但如果您愿意，您可以在配置中使用deviceSizes 。

如果您想为移动设备加载不同的图像，您可以使用picture 元素。看起来 Vercel一直致力于支持获取图像道具并将其用于其他元素（例如<picture>）。