Image Captions Example

679 字

3 分钟

Image Captions Example

2025-03-13

Examples

Markdown

/

Blogging

/

Demo

About Image Captions#

This feature wraps images in a <figure> tag only when the image carries independent meaning. If the image is part of the content and does not stand alone, it will not be enclosed in a <figure> tag. Only CommonMark syntax is supported.

Usage#

Single Image#

With Caption#

Markdown:

1
![A description of the image](url "An image title")

HTML:

1
<figure>
2
  <div>
3
    <figure>
4
      <img alt="A description of the image" src="url">
5
      <figcaption>An image title</figcaption>
6
    </figure>
7
  </div>
8
</figure>

A description of the image — Image Title 1

Without Caption#

Markdown:

1
![A description of the image](url)

HTML:

1
<figure>
2
  <div>
3
    <img alt="A description of the image" src="url">
4
  </div>
5
</figure>

Multiple Images#

When you include only images within a paragraph, they will be grouped together. Hard or soft breaks can also be used.

With Caption#

Markdown:

1
![Image 1 description](url1 "Image Title 1")
2
![Image 2 description](url2 "Image Title 2")

HTML:

1
<figure>
2
  <div>
3
    <figure>
4
      <img alt="Image 1 description" src="url1">
5
      <figcaption>Image Title 1</figcaption>
6
    </figure>
7
    <figure>
8
      <img alt="Image 2 description" src="url2">
9
      <figcaption>Image Title 2</figcaption>
10
    </figure>
11
  </div>
12
</figure>

Without Caption#

Markdown:

1
![Image 1 description](url1)
2
![Image 2 description](url2)

HTML:

1
<figure>
2
  <div>
3
    <img alt="Image 1 description" src="url1">
4
    <img alt="Image 2 description" src="url2">
5
  </div>
6
</figure>

With Shared Caption#

Markdown:

1
![Image 1 description](url1 "This becomes the caption")
2
![Image 2 description](url2)

HTML:

1
<figure>
2
  <div>
3
    <img alt="Image 1 description" src="url1">
4
    <img alt="Image 2 description" src="url2">
5
  </div>
6
  <figcaption>This becomes the caption</figcaption>
7
</figure>

Single Image Link#

With Caption#

Markdown:

1
[![A description of the image](image-url "An image title")](link-url "A link title")

HTML:

1
<figure>
2
  <a href="link-url">
3
    <figure>
4
      <img alt="A description of the image" src="image-url">
5
      <figcaption>An image title</figcaption>
6
    </figure>
7
  </a>
8
  <figcaption>A link title</figcaption>
9
</figure>

Markdown:

1
[![A description of the image](image-url)](link-url "A link title")

HTML:

1
<figure>
2
  <a href="link-url">
3
    <img alt="A description of the image" src="image-url">
4
  </a>
5
  <figcaption>A link title</figcaption>
6
</figure>

Markdown:

1
[![A description of the image](image-url "An image title")](link-url)

HTML:

1
<figure>
2
  <a href="link-url">
3
    <figure>
4
      <img alt="A description of the image" src="image-url">
5
      <figcaption>An image title</figcaption>
6
    </figure>
7
  </a>
8
</figure>

Without Caption#

Markdown:

1
[![A description of the image](image-url)](link-url)

HTML:

1
<figure>
2
  <a href="link-url">
3
    <img alt="A description of the image" src="image-url">
4
  </a>
5
</figure>

Multiple Image Link#

When you include only a multiple-image link within a paragraph, the images will be grouped together. Hard or soft breaks can also be used.

With Caption#

Markdown:

1
[![Image 1 description](image-url1 "Image Title 1")
2
![Image 2 description](image-url2 "Image Title 2")](link-url "A link title")

HTML:

1
<figure>
2
  <a href="link-url">
3
    <figure>
4
      <img alt="Image 1 description" src="image-url1">
5
      <figcaption>Image Title 1</figcaption>
6
    </figure>
7
    <figure>
8
      <img alt="Image 2 description" src="image-url2">
9
      <figcaption>Image Title 2</figcaption>
10
    </figure>
11
  </a>
12
  <figcaption>A link title</figcaption>
13
</figure>

Markdown:

1
[![Image 1 description](image-url1)
2
![Image 2 description](image-url2)](link-url "A link title")

HTML:

1
<figure>
2
  <a href="link-url">
3
    <img alt="Image 1 description" src="image-url1">
4
    <img alt="Image 2 description" src="image-url2">
5
  </a>
6
  <figcaption>A link title</figcaption>
7
</figure>

Markdown:

1
[![Image 1 description](image-url1 "Image Title 1")
2
![Image 2 description](image-url2 "Image Title 2")](link-url)

HTML:

1
<figure>
2
  <a href="link-url">
3
    <figure>
4
      <img alt="Image 1 description" src="image-url1">
5
      <figcaption>Image Title 1</figcaption>
6
    </figure>
7
    <figure>
8
      <img alt="Image 2 description" src="image-url2">
9
      <figcaption>Image Title 2</figcaption>
10
    </figure>
11
  </a>
12
</figure>

Without Caption#

Markdown:

1
[![Image 1 description](image-url1)
2
![Image 2 description](image-url2)](link-url)

HTML:

1
<figure>
2
  <a href="link-url">
3
    <img alt="Image 1 description" src="image-url1">
4
    <img alt="Image 2 description" src="image-url2">
5
  </a>
6
</figure>

Root Relative Path and Relative Path#

Root Relative Path#

A root relative path refers to assets located in the public directory of your project.

Markdown:

1
![A description of the image](/favicon/favicon-dark-128.png "An image title")

Image Title 1

Relative Path#

A relative path refers to assets inside the src directory, and it is relative to the location of the current file.

Markdown:

1
![A description of the image](../../assets/images/demo-avatar.png "An image title")

Image Title 1

Options#

You can specify the options in the astro.config.mjs file.

1
...
2
import remarkImageCaption from "./src/plugins/remark-image-caption.ts"
3
...
4
export default defineConfig({
5
  ...
6
  markdown: {
7
    ...
8
    remarkPlugins: [
9
      ...
10
      remarkImageCaption, // Plugin here
11
      ...

Name	Type	Default	Description
className	string	""	The class name to apply to the outer `<figure>` element.
excludedPaths	(string \| RegExp)[]	[]	An array of image paths that should be excluded from transformation. This can also be used to exclude paths like those under the `src` folder in Astro projects.
lazyLoad	boolean	false	Set the `loading` attribute on `<img>` elements.
linkAttributes	LinkAttributes		Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.

linkAttributes#

Name	Type	Default	Description
target	string	”	Specify where to open linked documents. The default (empty) does not set a target on links.
rel	string	”	Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.

Image Captions Example

https://blog.170529.xyz/posts/image-captions/

作者

Starfallen

发布于

2025-03-13

许可协议

CC BY-NC-SA 4.0

Nginx安装

Link Cards Example