我尝试将一个带有不同媒体图像的经典picture-tag改为next.js Image组件:
组织:
<picture>
<source media="(min-width:740px)" srcSet={block.imageLandscape.url} />
<img
src={block.imagePortrait.url}
alt={block.imagePortrait.title}
width={block.imagePortrait.width}
height={block.imagePortrait.height}
className={basic.imgFluid}
></img>
</picture>
新增内容:
<Image
src={block.imagePortrait.url}
alt={block.imagePortrait.title}
width={2560}
height={720}
sizes="(max-width: 739px) 100vw, 740px"
srcSet={`${block.imageLandscape.url} 2560w, ${block.imagePortrait.url} 740w`}
className={basic.imgFluid}
/>
下一张图片总是从src取url,srcSet不工作。怎么了?谢谢帮忙
1条答案
按热度按时间nwwlzxa71#
Next.js文档说,所有的props都传递给
<img />
标签,除了srcSet
。你应该使用deviceSizes
。下一个图像srcSet文档
deviceSizes prop 文档