Regular markdown images work as intended. For example:

Further regular html images also work as intended. For example:

In order to utilize Gatsby Image however, there is a bit of set up necessary for each image you include.

For example, consider the image "myface.jpg"

1. Put the image into src/images

2. Edit the file src/components/image.jsx in the folowing way:

Add a graphql query for the image with whatever name you want. In this case I used the name "aboutHeadshot".

//src/components/image.jsx
//...
const useFluidImage = () => {
  const images = useStaticQuery(graphql`
    fragment FluidImage on File {
      childImageSharp {
        fluid(quality: 70, maxWidth: 800) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    query {
      favicon: file(relativePath: { eq: "icon.png" }) {
        ...FluidImage
      }
+     aboutHeadshot: file(relativePath: {eq: "myface.jpg" }) {
+       ...FluidImage
+     }
    }
  return images;
}

Then add a case statement to the Image component to grab that particular image.

//src/components/image.js
//...
const Image = ({ particularImage, className, alt }) => {
  const images = useFluidImage()
  let fluid
  switch (particularImage) {
    case "favicon":
      fluid = images.favicon.childImageSharp.fluid
      break
+   case "aboutHeadshot":
+     fluid = images.aboutHeadshot.childImageSharp.fluid
+     break
    default:
      return null
  }
  return <Img className={className} fluid={fluid} alt={alt} />
}

3. Begin using the image in your Blog

//src/blog/anyfile.mdx
//...
import Image from "../components/image"
<Image particularImage="aboutHeadshot" className="mw5" alt="My headshot"/>

4. Profit??

This procedure will result in the following image:

More Information

To learn more about Gatsby-Image check out https://www.gatsbyjs.org/docs/using-gatsby-image/

Further, if you know of a better way to go about implemnting this feature in this blog, let me know at https://www.github.com/kunalja/gatsby-starter-math-blog/issues