Setup images in MDX with Gatsby

This recipe installs and configures all the necessary NPM packages & Gatsby plugins to enable inline-images in MDX and MD files.

Based on https://www.gatsbyjs.com/docs/working-with-images-in-markdown/

This recipe:

---

Installs NPM Packages.

<NPMPackage name="gatsby-source-filesystem" /> <NPMPackage name="gatsby-plugin-mdx" /> <NPMPackage name="@mdx-js/mdx" /> <NPMPackage name="@mdx-js/react" />

<NPMPackage name="gatsby-image" /> <NPMPackage name="gatsby-plugin-sharp" /> <NPMPackage name="gatsby-transformer-sharp" /> <NPMPackage name="gatsby-remark-images" />

---

Adds Gatsby plugin gatsby-source-filesystem to read images from the src/images directory.

<GatsbyPlugin name="gatsby-source-filesystem" key="src/images" options={{ name: MDXImages, path: src/images/, }} />

---

Adds gatsby-plugin-sharp, gatsby-transformer-sharp, and gatsby-transformer-remark to handle image processing.

<GatsbyPlugin name="gatsby-plugin-sharp" /> <GatsbyPlugin name="gatsby-transformer-sharp" />

---

Configures gatsby-plugin-mdx to resolve images in MDX files.

<GatsbyPlugin name="gatsby-plugin-mdx" options={{ gatsbyRemarkPlugins: [ { resolve: gatsby-remark-images, options: { maxWidth: 1200, } } ] }} />

---

Once you've installed this recipe, you can start adding images to MDX pages.