图片卡片

约 1132 字大约 4 分钟

2025-12-24

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

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

属性

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