我想为移动的视口加载不同的图像。基于Next.js文档传递srcSet不起作用，那么我该怎么做呢？
现在我可以用CSS display属性来做，但我需要像下面这样的东西：
<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]"
/>
1条答案
按热度按时间7z5jn7bk1#
根据Next JS documentation，
Image组件不包含任何名为srcSet的props。因此，如果您想根据大小更改为不同的图像，我建议使用事件处理程序创建一个单独的钩子。但是，如果您计划加载相同大小的图像，则可以检查
Image组件的sizes属性。我发现特别有益的是，我建议使用Cloudinary来托管您的资产。这将消除您为每个客户端手动优化映像的负担，并允许您根据客户端需求创建响应映像。您所要做的就是在HTMLimg标签中定义srcSet，其余的留给Cloudinary。我想你会发现this很有帮助。