图片
小于 1 分钟
改进 Markdown 中的图像语法以支持颜色方案和大小。
配置
TS
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
plugins: {
mdEnhance: {
// 启用 figure
figure: true,
// 启用图片懒加载
imgLazyload: true,
// 启用图片标记
imgMark: true,
// 启用图片大小
imgSize: true,
},
},
}),
});
JS
/// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
// 启用 figure
figure: true,
// 启用图片懒加载
imgLazyload: true,
// 启用图片标记
imgMark: true,
// 启用图片大小
imgSize: true,
},
},
}),
};
图片懒加载
注
我们正在使用原生 HTML5 功能启用延迟加载，因此你的浏览器必须支持 loading=lazy 属性。
图片 ID 标记
GFM 支持通过 ID 标记图片，使得图片只在特定的模式显示。我们同时支持 GitHub 的标记与简易标记 #light 和 #dark。
你可以通过 imgMark 选项控制它。
ID 标记 案例
(尝试切换主题)
<AppearanceSwitch /> (尝试切换主题)
```md
```
高级用法
你可以将对象传递给 imgMark 以配置 ID 标记，可用选项有:
interface ImageMarkOptions {
/** 仅限日间模式的 ID */
light?: string[];
/** 仅限夜间模式的 ID */
dark?: string[];
}
图片尺寸
当你在插件选项中设置 imgSize: true 时，可以使用 =widthxheight 指定图像大小。
![Alt](/example.jpg "图片标题" =200x)
上面的 Markdown 将被解析为:
<img src="/example.png" width="200" height="300" />
<img src="/example.jpg" title="图片标题" width="200" />
<img src="/example.bmp" height="300" />
图片 Figure
有时，你可能希望为图像添加描述，并将其单独展示在上下文中，在这种情况下，你应该在插件选项中设置 figure: true。
这样当你单独将图片至于一行 (也可同时嵌套链接)，图像将显示为 <figure> ，标题或图片替代文字将显示为 <figcaption>。
Figure 案例
[](https://theme-hope.vuejs.press/)
[](https://theme-hope.vuejs.press/)
![VuePress Hope 图标](https://theme-hope-assets.vuejs.press/logo.svg "VuePress Hope 图标" =300x300)