前面的图像为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 { ... }"?

为什么这不起作用的任何想法？我还是盖茨比的新手,所以这可能是一个让我头疼的问题.提前致谢.

Answer 1

必须选择子字段。您是说“ 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/

Answer 2

通过删除文件夹使构建缓存无效.cache。