In this challenge the goal is to learn how to use images in Gatsby websites.
There is two parts: how to add a feature image to markdown posts and how to add images directly into the markdown.
For the first part, the plugin gatsby-plugin-sharp and the transformer gatsby-transformer-sharp are used. Also gatsby-image is used in order to add an image component for showing the image. To install them:
npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp
Then a featuredImage property to can be added to the markdown files like this.
---
title: "Challenge-1 (Day 1)"
date: "2020-04-12 00:15"
featuredImage: "../images/image.jpg"
---
...
Next step is to query for the image in the blog post template:
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
featuredImage {
childImageSharp {
fluid(maxWidth: 800) {
...GatsbyImageSharpFluid
}
}
}
}
excerpt
}
}
`
Lastly we import the Img component from gatsby-image, get the fluid member from the previous query and use it in the JSX code:
import Img from "gatsby-image"
...
let featuredImgFluid = post.frontmatter.featuredImage.childImageSharp.fluid
...
<Img fluid={featuredImgFluid} />
The second part is about including images directly into the markdown content. To do this, the plugin gatsby-remark-images is used. It can be used with many markdown plugins or transformers, like gatsby-plugin-mdx but, as we are using gatsby-transformer-remark the configuration would be like this:
...
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
},
],
},
},
...
After this, we can insert images with standar markdown like this:
