Pic 图片组件：带说明文字与灯箱缩放

为什么需要 Pic

在文章中插入图片时，直接写 Markdown 图片虽然简单，但一旦想补充说明文字、控制尺寸，或者支持点击后放大查看，就会开始分散到多个语法和样式里。

Pic 组件就是为这个场景准备的：用统一的组件 API 展示图片，支持说明文字、尺寸控制，并且默认接入现有灯箱脚本。

用于展示图片，支持说明文字，点击后打开灯箱缩放。

效果预览

组件 语法

<Pic
  src="https://picsum.photos/480/240"
  caption="说明文字，还支持通过 width 或 height 属性指定尺寸"
/>

基本用法

只传 src 也可以正常渲染：

带说明文字

通过 caption 增加一行居中的说明文字：

指定尺寸

可以通过 width 或 height 控制图片显示尺寸：

关闭灯箱

默认 zoom={true}，点击图片会进入灯箱。如果你只想展示图片，不想让它可点击放大，可以手动关闭：

字段说明

字段参考旧项目中的预览写法：

src: https://picsum.photos/480/240
# mirror: # 是否借助第三方图片加载服务，见源代码
caption: 说明文字，还支持通过 width 或 height 属性指定尺寸
# zoom: false # 是否开启灯箱缩放，默认开启

Props 一览

核心实现

接入现有灯箱

当前博客已经在文章页接入了全局 lightbox 脚本，所以组件只需要决定“让这张图参与灯箱”还是“忽略这张图”：

const figureAttrs = zoom ? { "data-lightbox-root": true } : {};
const imgAttrs = zoom ? {} : { "data-lightbox-ignore": true };

开启 zoom 时，组件自身会作为最近的 data-lightbox-root，这样点击后只会把当前图片纳入灯箱范围，不会把整篇文章的所有图片串成一组。

说明文字优先级

图片的 alt 默认会优先取 caption，这样灯箱查看时也能拿到更友好的描述：

const resolvedAlt = caption || alt;

mirror 字段兼容

旧项目中的 mirror 字段用于第三方图片代理服务。当前 Astro 项目没有接入同款能力，所以这里保留了字段兼容性，传值时只会附加：

const referrerPolicy = mirror ? "no-referrer" : undefined;

这样对部分限制来源的外链图床会更友好，但不会额外引入新的图片服务依赖。

小结

Pic 组件适合承接文章里的绝大多数图片展示需求。它比原生 Markdown 图片更统一，也更容易维护：说明文字、尺寸控制、灯箱开关都集中在一个组件里，后续想统一调整样式也会更轻松。