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


高级用法
你可以将对象传递给 markdown.imgMark
以配置 ID 标记:
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
markdown: {
imgMark: {
/** 仅限日间模式的 ID */
light: ["light"],
/** 仅限夜间模式的 ID */
dark: ["dark"],
},
},
}),
});
图片尺寸
通过此功能,你可以使用 =widthxheight
指定图像大小。



上面的 Markdown 将被解析为:
<img src="/example.png" width="200" height="300" />
<img src="/example.jpg" title="图片标题" width="200" />
<img src="/example.bmp" height="300" />
图片展示
有时,你可能希望为图像添加描述,并将其单独展示在上下文中,在这种情况下,你应该启用此功能将图片渲染为 <figure>
。
这样当你单独将图片至于一行 (也可同时嵌套链接),图像将显示为 <figure>
,标题或图片替代文字将显示为 <figcaption>
。
图片示例 demo

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

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

更新日志
2025/2/18 07:08
查看所有更新日志
b1230
-于22787
-于2c32a
-于6ad69
-于b41c0
-于54c46
-于55ea3
-于792dc
-于16eb1
-于3a6d6
-于b7879
-于8174c
-于c8d60
-于52ad0
-于6e91a
-于79ac6
-于b4289
-于2243a
-于19d23
-于23f74
-于2c32c
-于2fa50
-于3c8d6
-于d48cc
-于