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 { ... }"?

关于为什么这不起作用的任何想法？我对盖茨比还是新手，所以这可能是我头疼的问题。提前致谢。

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。

Answer 3

如果图像被转换为​​文件类型，你想使用 publicUrl 而不是直接使用图像：

      frontmatter {
        path
        title
        indexImage {
          publicUrl
        }
      }

而不是在代码中：

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