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)

Oswaldo Martinex

Photo by Oswaldo Martinez