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!

Photo by Oswaldo Martinez