markdown - Gatsby.js 前面的图片很重要

Question

我一直在努力解决这个问题:

我的前台看起来像:

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

我的图像与我的 index.md 位于同一文件夹中文件。

在我的 templates/post.js文件，我有以下行:

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

认为这会拉入前面问题中列出的来源。我的 post.js 查询是:

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

下面是错误信息:

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

关于为什么这不起作用的任何想法？我对 Gatsby 还是个新手，所以这可能是我无法理解的问题。提前致谢。

Answer 1

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

是错误的关键部分。

任何时候您看到“子字段”和带有 indexImage 的字段(如 { ... } )这意味着这是一个“对象”类型而不是“标量”(例如字符串、数字、浮点数等)类型。

所以你的查询应该是这样的:

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

本示例站点记录了如何使用图像处理查询 https://image-processing.gatsbyjs.org/