Outline
Let's add an image to about.js.
First, let's update our page query to get a new image and use fixed instead of fluid:
export const query = graphql`
query {
site {
siteMetadata {
description
author
}
}
file(relativePath: { eq: "images/forest.jpg" }) {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
}
`
Next, let's use styled-components to create a component and add it to our page. First, let's import styled-components and Gatsby Image:
import Image from "gatsby-image"
import styled from "styled-components"
Now let's create a component for our image:
const ForestImage = styled(Image)`
border-radius: 10px;
margin-top: 20px;
`
To add the image to the page, we do the same thing we did in the last video but use fixed instead of fluid:
export default ({ data }) => (
<Layout>
<ForestImage fixed={data.file.childImageSharp.fixed} alt="Forest" />
<p>{data.site.siteMetadata.description}</p>
<p>To make a reservation, give us a call at 360-555-0412.</p>
<p>This site was made with love by {data.site.siteMetadata.author}.</p>
</Layout>
)
Run gatsby develop and check out the About page. You should see the same blurred placeholder when the page loads, but the image shouldn't resize as you change the browser window size. Nice!
We're now ready to learn about how to use images in Markdown, but before we do that, we need to make one quick adjustment in the next video.