How to Add Markdown Image Captions in Gatsby

To add captions to images inside Markdown files, you can use gatsby-remark-images plugin.

First, install the plugin and its dependencies.

npm install gatsby-remark-images gatsby-plugin-sharp

Next, add the following configuration to your gatsby-config.js.

'gatsby-plugin-sharp',
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-images',
          options: {
            showCaptions: true,
          },
        },
      ],
    },
  };

Now, whenever you insert an image in Markdown, specify the caption in its alt attribute.

![Snowy forest](./forest.png)

You can also use the title attribute for captions by changing the configuration.

{
  resolve: 'gatsby-remark-images',
    options: {
      showCaptions: ['title', 'alt']
    }
  }
}

Now, if you set the title, it will be used as the caption. If you don’t set the title, but set the alt attribute, it will be used instead.

![Alt text goes here](./image.png "title that will be used a caption")