图片

大约 2 分钟MarkdownMarkdown图片

改进 Markdown 中的图像语法以支持颜色方案和大小。

配置

// .vuepress/config.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,
      },
    },
  }),
});








 
 
 
 
 
 
 
 




图片懒加载

如果你想在你的页面中延迟加载图片,你可以在插件选项中设置 imgLazyload: true

我们正在使用原生 HTML5 功能启用延迟加载,因此你的浏览器必须支持 loading=lazy 属性open in new window

图片 ID 标记

GFM 支持通过 ID 标记图片,使得图片只在特定的模式显示。我们同时支持 GitHub 的标记与简易标记 #light#dark

你可以通过主题选项中的 plugins.mdEnhance.imgMark 选项控制它。

![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
![GitHub Dark](/assets/icon/github-dark.png#gh-light-mode-only)

![GitHub Light](/assets/icon/github-light.png#dark)
![GitHub Dark](/assets/icon/github-dark.png#light)
案例

上述演示会渲染如下结果

(尝试切换主题)

GitHub LightGitHub Dark

GitHub LightGitHub Dark

高级用法

你可以将对象传递给 imgMark 以配置 ID 标记,可用选项有:

interface ImageMarkOptions {
  /** 仅限日间模式的 ID */
  light?: string[];
  /** 仅限夜间模式的 ID */
  dark?: string[];
}

图片尺寸

当你在主题选项中设置 plugin.mdEnhance.imgSize: true 时,可以使用 =widthxheight 指定图像大小。

![Alt](/example.png =200x300)

![Alt](/example.jpg "图片标题" =200x)
![Alt](/example.bmp =x300)

上面的 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>

![VuePress Hope 图标](/favicon.ico)

[![VuePress Hope 图标](/favicon.ico)](https://theme-hope.vuejs.vuepress/)

![VuePress Hope 图标](/favicon.ico "VuePress Hope 图标")

[![VuePress Hope 图标](/favicon.ico "VuePress Hope 图标")](https://theme-hope.vuejs.vuepress/)

![VuePress Hope 图标](/logo.svg "VuePress Hope 图标" =300x300)

将呈现为:

VuePress Hope 图标
VuePress Hope 图标
VuePress Hope 图标open in new window
VuePress Hope 图标
VuePress Hope 图标
VuePress Hope 图标
VuePress Hope 图标open in new window
VuePress Hope 图标
VuePress Hope 图标
VuePress Hope 图标