图片
改进 Markdown 中的图像语法以支持颜色方案和大小。
配置
import { hopeTheme } from "vuepress-theme-hope";
export default hopeTheme({
markdown: {
// 启用 figure
figure: true,
// 启用图片懒加载
imgLazyload: true,
// 启用图片标记
imgMark: true,
// 启用图片大小
imgSize: true,
},
});
图片懒加载
此功能通过原生 HTML5 启用图片的延迟加载,因此仅在 支持 loading=lazy 属性 的浏览器生效。
图片 ID 标记
此功能允许你通过 #light
和 #dark
标记图片,使得图片只在特定的模式显示。
<ColorModeSwitch /> 👈 尝试切换主题


高级用法
你可以将对象传递给 markdown.imgMark
以配置 ID 标记:
import { hopeTheme } from "vuepress-theme-hope";
export default hopeTheme({
markdown: {
imgMark: {
/** 仅限日间模式的 ID */
light: ["light"],
/** 仅限夜间模式的 ID */
dark: ["dark"],
},
},
});
图片尺寸
当你在插件选项中设置 imgSize: 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 语法
当你在主题选项中设置 markdown.obsidianImgSize: 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 等平台上导致渲染问题。
当你在主题选项中设置 markdown.legacyImgSize: 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>
。
这样当你单独将图片至于一行 (也可同时嵌套链接),图像将显示为 <figure>
,标题或图片替代文字将显示为 <figcaption>
。


[](https://theme-hope.vuejs.press/)

[](https://theme-hope.vuejs.press/)

更新日志
86417
-于1e9f5
-于d8e7e
-于a1439
-于06ef8
-于55e92
-于b1230
-于22787
-于2c32a
-于6ad69
-于b41c0
-于54c46
-于55ea3
-于792dc
-于16eb1
-于3a6d6
-于b7879
-于8174c
-于c8d60
-于52ad0
-于6e91a
-于79ac6
-于b4289
-于2243a
-于19d23
-于23f74
-于2c32c
-于2fa50
-于3c8d6
-于d48cc
-于