概述

使用 <ImageCard> 组件在页面中显示图片卡片。

图片卡片 有别于 markdown 的 普通插入图片方式，它展示与图片相关的更多信息，包括标题、描述、作者、链接等。 适用于如 摄影作品、设计作品、宣传海报 等场景。

Props

imageRequiredstring

图片链接地址，本地图片必须使用绝对路径，即以 / 开头的路径，指向 /public 目录

titleOptionalstring

图片标题

descriptionOptionalstring

图片描述信息

authorOptionalstring

图片作者

hrefOptionalstring

点击图片标题后的跳转链接

dateOptionalstring | Date | number

图片 创作日期

widthOptionalstring | number

图片宽度

centerOptionalboolean

图片宽度不满屏时是否居中

示例

输入：

<ImageCard
  image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
  title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
  description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
  href="/"
  author="Andreas Kunz"
  date="2024/08/16"
/>

输出：

阿尔凡齐纳灯塔，阿尔加维，葡萄牙

Andreas Kunz | 2024年8月16日

今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。

还可以放到 <CardGrid> 组件中。

输入：

<CardGrid>
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
</CardGrid>

输出：

阿尔凡齐纳灯塔，阿尔加维，葡萄牙

Andreas Kunz | 2024年8月16日

今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。

阿尔凡齐纳灯塔，阿尔加维，葡萄牙

Andreas Kunz | 2024年8月16日

今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。

查看 照片类作品示例

贡献者

pengzhanbo

更新日志

2025/4/30 14:34

查看所有更新日志

• d1496-docs: update docs于 2025/4/30
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• e5d73-feat(theme): add width/center props support for ImageCard (#378)于 2024/12/14
• e3b1c-docs: improve docs于 2024/8/18