markdown-image
向你的 Markdown 图像添加附加功能。
使用方法
npm i -D @vuepress/plugin-markdown-image@next
import { markdownImagePlugin } from '@vuepress/plugin-markdown-image'
export default {
plugins: [
markdownImagePlugin({
// 启用 figure
figure: true,
// 启用图片懒加载
lazyload: true,
// 启用图片标记
mark: true,
// 启用图片大小
size: true,
}),
],
}
指南
图片懒加载
插件会通过原生 HTML5 功能启用图片的延迟加载,此功能仅在 支持 loading=lazy 属性 的浏览器生效。
图片 ID 标记
当你在插件选项中设置 mark: true
时,你可以通过 #light
和 #dark
标记图片,使得图片只在特定的模式显示。


高级用法
你可以将对象传递给 mark
以配置 ID 标记,可用选项如下:
interface ImageMarkOptions {
/** 仅限日间模式的 ID */
light?: string[]
/** 仅限夜间模式的 ID */
dark?: string[]
}
图片尺寸
当你在插件选项中设置 size: true
时,你可以在图片替代文字后面添加 =widthxheight
,并用空格分隔。
width
和 height
都应该是数字,单位为像素,并且都是可选的。



渲染为 ↓
<img src="/example.png" alt="替代文字" width="200" height="300" />
<img src="/example.jpg" alt="替代文字" title="标题" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />
Obsidian 语法
当你在插件选项中设置 obsidianSize: true
时,你可以在图片替代文字后面添加 widthxheight
,并用 |
分隔。
width
和 height
都应该是数字,单位为像素,并且都是必需的。设置其中一个为 0
以按比例缩放另一个。



渲染为 ↓
<img src="/example.png" alt="替代文字" width="200" height="300" />
<img src="/example.jpg" alt="替代文字" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />
在三种语法之间选择
- 旧语法在不支持的环境中会导致图片渲染问题(例如:GitHub)
- 新语法和 Obsidian 语法都与 Markdown 标准兼容,但新语法更自然。
旧语法 (已废弃)
这种语法可能会在 GitHub 等平台上导致渲染问题。
当你在插件选项中设置 legacySize: true
时,你可以在图片链接部分的末尾添加 =widthxheight
,并用空格分隔。
width
和 height
都应该是数字,单位为像素,并且都是可选的。



渲染为 ↓
<img src="/example.png" alt="替代文字" width="200" height="300" />
<img src="/example.jpg" alt="替代文字" title="标题" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />
图片展示
有时,你可能希望为图像添加描述,并将其单独展示在上下文中,在这种情况下,你应该在插件选项中设置 figure: true
。
这样当你单独将图片至于一行 (也可同时嵌套链接),图像将显示为 <figure>
,标题或图片替代文字将显示为 <figcaption>
。


[](https://vuejs.press/)

[](https://vuejs.press/)

配置项
figure
- 类型:
boolean
- 详情:是否启用图片 Figure 支持。
lazyload
- 类型:
boolean
- 详情:是否使用原生方式懒加载页面图片。
mark
类型:
ImageMarkOptions | boolean
interface ImageMarkOptions { /** 日间模式的 ID */ light?: string[] /** 夜间模式的 ID */ dark?: string[] }
详情:是否启用图片标注支持
size
- 类型:
boolean | 'strict'
- 详情:是否启用图片尺寸支持。
strict
需要显式设置0
来忽略宽度或高度。
obsidianSize
- 类型:
boolean
- 详情:是否启用 Obsidian 图片尺寸支持。
legacySize
- 类型:
boolean
- 详情:是否启用旧版图片尺寸支持。