为什么next.js中的picture元素不能使用隐藏属性?

我的组件树中有一个图片元素,位于 下一个.js 应用程序,我正在尝试使用它的隐藏属性,但它不起作用,所有图像仍然完全可见,在浏览器中检查时没有隐藏属性。

该组件是:

export function MemberPicture({
  member,
  active,
  id,
}: {
  member: Member;
  active: boolean;
  id: string;
}) {  

  return (
    <picture hidden={!active}>
      <source srcSet={member.images.webp} type="image/webp" />
      <Image
        src={member.images.png}
        alt={member.imageAlt}
        width="445"
        height="445"
        id={id}
        className={classnames(
          pageStyles.image,
        )}
      />
    </picture>
  );
}

我已经尝试使用文本布尔值在图片内的所有元素和图片本身上设置隐藏属性 true ,但也不起作用。

<picture hidden={true}>
      <source srcSet={member.images.webp} type="image/webp" hidden={true} />
      <Image
        src={member.images.png}
        alt={member.imageAlt}
        width="445"
        height="445"
        id={id}
        className={classnames(
          pageStyles.image,
        )}
        hidden={true}
      />
    </picture>

正在使用该组件,如图所示:

{crew.map((member, index) => {
  return (
    <MemberPicture
      id={imagesIds[index]}
      active={index === selectedMemberIndex}
      member={member}
    />
  );
})}

其父对象的样式及其样式为:

.imageWrapper {
  grid-area: image;
  max-width: 100%;
}

@media (min-width: 50em) and (orientation: landscape) {
  .imageWrapper {
    grid-column: span 2;
    max-width: 90%;
  }
}

.image {
  max-width: 100%;
}

@media (max-width: 35em) {
  .image {
    max-height: 320px;
  }
}

我将使用 display 属性设置为 none 因为隐藏属性不起作用,但我仍然想知道为什么设置该属性根本不起作用。