Tube - Mux Webhooks

• Image组件

  <Image
    src={thumbnailUrl ?? THUMBNAIL_FALLBACK}
    alt={title}
    fill
    sizes='(max-width: 768px) 100vw'
    className='h-full w-full object-cover group-hover:opacity-0'
  />
  

  • 在 Basic Layout 中我们曾经提到过 Image 组件的 width 和 height 默认是 required，除此之外还有一些常用属性 fill、sizes
  • width 和 height 主要用于设置图片的明确宽度和高度
  • fill
    1. 当你使用它时，图像会自动拉伸或缩放以填充其父容器的尺寸
    2. 不显示设置图片的宽高，而是依赖于父元素的大小来决定图像的尺寸
    3. 会保留图片的比例，但会拉伸或裁剪图片以填充整个容器
  • sizes
    1. 设置响应式图片大小，根据视口宽度调整图像尺寸
    2. 是一个CSS媒体查询的语法
    3. 当前例子中，当视口宽度小于768px，图片将占据视口宽度的100%

• group 属性

  • Tailwind 用来实现父子级联样式变化的属性，group本身并没有样式
  • 通常用于父元素 hover、focus 后，子元素发生样式变化；或者dropdown、tooltip等交互组件
  • 以下代码的功能是：当 .group 元素被 hover 时，会展示不同的 <Image> 组件

<div className="relative group">
  {/* wrapper */}
  <div className="relative w-full overflow-hidden rounded-xl aspect-video">
    {/* 缩略图 */}
    <Image
      ...
      className='h-full w-full object-cover group-hover:opacity-0'
    />
    {/* 预览gif */}
    <Image
      ...
      className='h-full w-full object-cover opacity-0 group-hover:opacity-100'
    />
  </div>

  {/* video duration */}
  ...
</div>