Images in front matter for Gatsby.js

Question

I've been struggling with this:

My front matter looks like:

---
path: '/path-to/'
title: 'Title of Post'
indexImage: './img.jpg'
---

with my image in the same folder as my index.md file.

In my templates/post.js file, I have the following line:

<img src={ post.frontmatter.indexImage }></img>

thinking this would pull in the source listed in the front matter. My post.js query is:

export const postQuery = graphql`
  query BlogPostByPath($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        path
        title
        indexImage
      }
    }
  }
`;

Below is the error message:

GraphQL Error Field "indexImage" of type "File" must have a selection of subfields. Did you mean "indexImage { ... }"?

Any thoughts on why this isn't working? I'm still new to Gatsby, so it may be an issue that is over my head. Thanks in advance.

Answer 1

must have a selection of subfields. Did you mean "indexImage { ... }

Is the key part of the error.

Anytime you see "subfields" and a field (like indexImage) with { ... } it means that this is an "object" type not a "scalar" (e.g. string, number, float, etc.) type.

So your query should look something like:

query BlogPostByPath($path: String!) {
  markdownRemark(frontmatter: { path: { eq: $path } }) {
    html
    frontmatter {
      path
      title
      indexImage {
        childImageSharp {
          resolutions(width: 400) {
            width
            height
            src
            srcSet
          }
        }
      }
    }
  }
}

This example site documents how to use the image processing queries https://image-processing.gatsbyjs.org/

Answer 2

Invalidate the build cache by deleting the .cache folder.