在文章中添加图片

发表于 2025-09-03

最后修改 2026-07-14

阅读量 —

获取图片链接

首先，将图片上传至图床，并获取对应的图片链接。

推荐工具 picx

picx是一个基于 GitHub 的开源图床工具，可免费使用。

使用时需注意：

• 使用GitHub仓库作为图床存储
• 仓库需设置为public（公开）

加载图片

获得图片链接后，在markdown文档中可通过插入ImageWrapper组件的方式加载图片。

基础用法

<ImageWrapper
  src="https://example.com/image.webp"
  alt="图片描述"
/>

alt 用于图片加载失败时的替代文本，也有利于 SEO 与无障碍访问，建议始终填写。

图片默认懒加载、居中展示（最大宽度 400px），点击可放大预览（也支持键盘 Enter/Space 打开）。加载失败时会显示"重新加载"按钮，可手动重试。

可选属性

属性	类型	默认值	说明
preview	boolean	true	是否启用点击放大预览
caption	string	''	图注，居中显示在图片下方
custom-class	string	''	附加自定义类名，便于在页面内覆写样式

需要自定义宽度时，直接传入行内样式即可：

<ImageWrapper
  src="https://example.com/qr-code.webp"
  alt="微信收款码"
  style="width: 300px;"
/>

带图注的示例：

<ImageWrapper
  src="https://example.com/office.webp"
  alt="办公室前台"
  caption="Atomeocean 新泽西办公室前台"
/>