Using Gatsby Remark Images

Gatsby-MDX is compatible with all of the gatsby-remark plugins, including gatsby-remark-images.

To enable gatsby-remark-images, you first need to install the relevant image plugins:

yarn add gatsby-plugin-sharp gatsby-remark-images

If you don't have gatsby-source-filesystem installed, also install that.

Then configure the plugins. gatsby-source-filesystem needs to be pointed at wherever you have your images on disk, gatsby-remark-images needs to be a sub-plugin of gatsby-mdx, and gatsby-plugin-sharp can be included on it's own.

plugins:[
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-mdx`,
    options: {
      gatsbyRemarkPlugins: [
      {
        resolve: "gatsby-remark-images",
        options: {
          maxWidth: 1035,
          sizeByPixelDensity: true
        }
      }
      ]
    }
  },
  {
    resolve: "gatsby-source-filesystem",
    options: {
      path: `${__dirname}/src/pages`
    }
  },
]

Then enjoy using images in your MDX files!

![my image](./my-awesome-image.png)

Photo by Oswaldo Martinez