# 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.org/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.