Gatsby remark images blur technique - reactjs

Question

I'm trying to use the Gatsby-plugin "gatsby-remark-images" to create blurry images on load which eventually renders the proper sized images when load is complete, but I might be doing this erroneously.
My index page has a Hero component, which is passed down the src of the image as such:
import Image from "../posts/img/Image.jpg";
...
<Hero id="indexPage" src={Image} />
My index page query fetches the 6 latest blogposts as such:
export const pageQuery = graphql`
query IndexQuery {
allMarkdownRemark(
limit: 6
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { category: { eq: "blog"} } }
) {
edges {
node {
fields {
slug
}
excerpt(pruneLength: 100)
timeToRead
frontmatter {
title
description
tags
date
category
thumbnail {
childImageSharp {
responsiveSizes(quality: 50, cropFocus: CENTER, toFormat: JPG) {
src
srcSet
sizes
base64
}
}
}
}
}
}
}
}
`;
Questions:
Do I need to add the Image to the query, in order to use the base64 method? In that case, how do I do that?
If I want to add the blur up technique to the images fetched from the query, what do I have to do? Do I need to add a state-change between loaded and loading, and change between base64 and src accordingly?

Answer 1

gatsby-remark-image is only for processing images linked to from within markdown files. See its docs https://www.gatsbyjs.org/packages/gatsby-remark-images/
For general image handling, see gatsby-image which has special GraphQL fragments & React component which makes it easy to add responsive, lazy images https://www.gatsbyjs.org/packages/gatsby-image/