具有不同SrcSet-Images的Next Image组件

dgjrabp2  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(158)

我尝试将一个带有不同媒体图像的经典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不工作。怎么了?谢谢帮忙

nwwlzxa7

nwwlzxa71#

Next.js文档说,所有的props都传递给<img />标签,除了srcSet。你应该使用deviceSizes
下一个图像srcSet文档
deviceSizes prop 文档

相关问题