ImageSets 组件
在 MDX 文章中按组切换多张图片
ImageSets 用于在文章中把多组图片压缩到同一段落位置展示。每一组可以包含一张或多张图片，读者通过右下角按钮切换组。
import ImageSets from '@/components/mdx/ImageSets.astro'
<ImageSets
columns={2}
sets={[
{
label: '第一组',
images: [
{ src: 'https://example.com/one.webp', alt: '第一张图' },
{ src: 'https://example.com/two.webp', alt: '第二张图' }
]
},
{
label: '第二组',
images: [
{ src: 'https://example.com/three.webp', alt: '第三张图' },
{ src: 'https://example.com/four.webp', alt: '第四张图' }
]
}
]}
/>可选参数：
columns：桌面端每组显示几列，默认2，最大4。ratio：图片框比例，默认16 / 10；如果希望图片保持原始高度，可以传ratio="auto"。fit：图片填充方式，默认cover；如果是截图或图表，可以传fit="contain"。maxWidth：组件最大宽度，默认58rem。initial：默认显示第几组，从1开始。