图片

图片

发表于 更新于
作者 廿四2 min 阅读

让你的 VitePress 站点中的图片支持尺寸标注、懒加载、图片包裹等功能。

配置 ​

ts
import { defineConfig } from 'vitepress-theme-niansi'

export default defineConfig({
  markdown: {
    // 懒加载（可选）
    image: {
      lazyLoading: true
    },
    plugins: {
      // 开启图片插件
      image: true
      // 或传入配置项
      // image: { lazyLoading: true, focusable: false, linkImage: false }
    }
  }
})

配置项 ​

配置项类型默认值说明
lazyLoadingbooleanfalse原生懒加载
focusablebooleantrue图片可聚焦（添加 tabindex="0"）
linkImagebooleantrue链接图片 [![alt](url)](link) 也转换为 figure

懒加载优先级 ​

markdown.image.lazyLoading 的优先级高于 markdown.plugins.image.lazyLoading。

ts
// 开启插件，但懒加载由 markdown.image.lazyLoading 决定
markdown: {
  image: { lazyLoading: true },
  plugins: { image: true }
}

语法 ​

图片尺寸 ​

使用 alt =宽度 x 高度 语法为图片指定尺寸。

替代文字
替代文字
替代文字
标题
替代文字
替代文字
Demo
md
![替代文字 =200x300](/example.png)

![替代文字 =200x](/example.png "标题")

![替代文字 =x300](/example.png)

Figure 包裹 ​

独立的图片会自动转换为 <figure> 元素，alt 或 title 作为 <figcaption> 内容。

替代文字
替代文字
替代文字
替代文字
Demo
md
![替代文字 =200x300](/example.png)

<figure>
  <img src="/example.png" alt="替代文字" width="200" height="300" tabindex="0" />
  <figcaption>替代文字</figcaption>
</figure>

带标题的图片 ​

使用 ![alt](url "标题") 语法，标题会作为 <figcaption> 内容。

图片说明
这是一张示例图片
图片说明
这是一张示例图片
Demo
md
![图片说明 =300x200](/example.png "这是一张示例图片")

<figure>
  <img src="/example.png" alt="图片说明" width="300" height="200" tabindex="0" title="这是一张示例图片" />
  <figcaption>这是一张示例图片</figcaption>
</figure>

更新日志

2026-04-18 23:33
查看所有更新日志
Markdown图片
Markdown