Image

Improve image syntax in Markdown to support color scheme and size.

Settings

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      // Enable figure
      figure: true,
      // Enable image lazyload
      imgLazyload: true,
      // Enable image mark
      imgMark: true,
      // Enable image size
      imgSize: true,
    },
  }),
});

Image Lazyload

This feature enables lazyload with native HTML5, so your browser must support loading=lazy attribute.

Image Mark

This feature allows you to mark images with #light and #dark suffix to display them in a specific color scheme.

👈 Try to toggle theme mode

Image mark demo

![GitHub Light](/assets/image/github-light.svg#dark)
![GitHub Dark](/assets/image/github-dark.svg#light)

Advanced

You can pass an object to markdown.imgMark to config ID marks:

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      imgMark: {
        /** lightmode only IDs */
        light: ["light"],
        /** darkmode only IDs */
        dark: ["dark"],
      },
    },
  }),
});

Image Size

You can use =widthxheight to specify the image size with this feature.

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

![Alt](/example.jpg "Image title" =200x)
![Alt](/example.bmp =x300)

The above Markdown will be parsed as:

<img src="/example.png" width="200" height="300" />
<img src="/example.jpg" title="Image title" width="200" />
<img src="/example.bmp" height="300" />

Figure

Sometimes, you may want to add a description with image and place it between contents, in this case you should use this feature to convert images to <figure>.

If the image is standalone in a line, wrapped or not wrapped by link, it will be displayed as <figure> and title (or alt) will be displayed as <figcaption>.

Figure demo

VuePress Hope Logo

VuePress Hope Logo

VuePress Hope Logo

VuePress Hope Logo

VuePress Hope Logo

![VuePress Hope Logo](/favicon.ico)

[![VuePress Hope Logo](/favicon.ico)](https://theme-hope.vuejs.press/)

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

[![VuePress Hope Logo](/favicon.ico "VuePress Hope Logo")](https://theme-hope.vuejs.press/)

![VuePress Hope Logo](https://theme-hope-assets.vuejs.press/logo.svg "VuePress Hope Logo" =300x300)