The GatsbyImage component

If ever you need to use dynamic images, such as those embedded in your Markdown content, then you can use the GatsbyImage component.

Let's add hero images to our Markdown/MDX blog posts using the GatsbyImage component:

1. Install the gatsby-transformer-sharp npm package:

   npm install gatsby-transformer-sharp

2. Add some images to assets/images that you would like to use as covers for your blog posts – one per blog post.
3. Update your Gatsby-config.js file so that it includes your assets source:

   {
         resolve: 'gatsby-source-filesystem',
         options: {
           path: '${__dirname}/assets/images',
         },
    },

   Unlike StaticImage, GatsbyImage requires that images are ingested into our data layer. We can use the gatsby-source-filesystem plugin to achieve this, but by giving it the path to our images.

4. For each blog post, modify the post file's frontmatter so that it includes a hero key that contains the relative...