Published on

如何使用 CaptionImage 组件

Authors
  • avatar
    Name
    Simmzl
    Twitter

如何使用 CaptionImage 组件

在 MDX 中,我们经常需要插入图片,并添加说明文字。CaptionImage 组件可以让这个过程变得简单高效。

基本用法

下面是一个基本的使用示例:

这是一张海洋图片
这是一张海洋图片

使用自定义说明文字

如果你想使用与 alt 不同的说明文字,可以使用 caption 属性:

时光机器
这是一个更详细的说明文字,可以包含更多关于这张图片的信息

自定义样式

你还可以自定义容器和说明文字的样式:

Logo图片
Logo图片

在博客文章中使用

CaptionImage 组件在博客文章中特别有用,特别是需要展示多张图片并添加说明的情况。它会自动将图片宽度设置为 100%,让图片能够自适应不同尺寸的屏幕。

无论是技术教程、旅行日志还是产品展示,CaptionImage 都能帮你呈现出美观的图片效果。