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:
- Install the
gatsby-transformer-sharpnpm package:npm install gatsby-transformer-sharp
- Add some images to
assets/imagesthat you would like to use as covers for your blog posts – one per blog post. - Update your
Gatsby-config.jsfile so that it includes yourassetssource:{ resolve: 'gatsby-source-filesystem', options: { path: '${__dirname}/assets/images', }, },Unlike
StaticImage,GatsbyImagerequires that images are ingested into our data layer. We can use thegatsby-source-filesystemplugin to achieve this, but by giving it the path to our images. - For each blog post, modify the post file's
frontmatterso that it includes aherokey that contains the relative...