The caption of the image is very useful in articles. In Markdown syntax there's no place to add a caption to image:

![This is alt](here-is-the-url-of-pic "Here is the title")

Then I found the this article: Customising image display in gatsby. It turned out the plugin gatsby-remark-images can do the caption thing for us. We need to set the option showCaptions to "true" which in the options of gatsby-remark-images in config.js:

plugins: [
  {
    resolve: `gatsby-remark-images`,
    options: {
      maxWidth: 800,
      showCaptions: true,
    },
  },
]

And the "title" in the markdown syntax will automatically show as a caption. We can use the .gatsby-resp-image-figcaption class to modify its styles.