Following on from my previous post about setting up Gatsby and using Markdown for pages / posts, I also needed to include inline images in some posts. This is pretty straightforward actually.

Install gatsby-remark-images (npm install --save gatsby-remark-images) and then edit your gatsby-config.js file. You should also have gatsby-plugin-sharp installed too (I already did, if not run the same npm install --save command).

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 920,
              wrapperStyle: "margin:0;",
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
  ],
};

Set your maxWidth in pixels of the div where the Markdown will be displayed. It’s used to work out the responsive thumbnails. Also you can apply certain styles by using the wrapperStyle field. I didn’t want my images centred so I reset the margin.

There’s heaps of options as detailed on the gatsby-remark-images documentation.

The usage is pretty straightforward as below.

![Alt text goes here](../images/path-to/the-image.png "Title goes here")