Gatsby 在 graphql 查询返回后获取图像路径

所以我用 Gatsby 和 Remark 写了一个博客网站。我的帖子结构如下：

Library/
 -- category-name/
 ---- article-name/
 ------ index.md

这非常有效，使我能够制作类似的路径/category-name/article-name.

我还想做的是能够在其中放置一个名为“hero.jpg”的图像，并让 Gatsby 自动拾取它，而无需添加对其的 frontmatter 引用。

到目前为止，我已经成功地将以下内容添加到“gatsby-node.js”中：

const hero = (fs.existsSync(path.resolve(__dirname, `src/library/pages/${slug}hero.jpg`))) ? `${slug}hero.jpg` : ''
createNodeField({
      node,
      name: 'hero',
      value: hero,
    })

就 graphql 数据而言，这是有效的，我现在看到以下内容：

{
  "node": {
  "id": "3190922a-2207-5621-a7be-e02be9e8da24",
  "fields": {
    "hero": "/category-name/article-name/hero.jpg"
  },
},

然而在实际页面上，图像链接/category-name/article-name/hero.jpg不存在，所以我得到了一张死图像。我知道这是因为我的图像路径正在被改变gatsby-transformer-sharp但我不知道如何计算出它正在转变为什么。

我相信我需要做一些类似于答案的事情这个问题 https://stackoverflow.com/questions/50141031/gatsby-image-difference-between-childimagesharp-vs-imagesharp但这似乎期望你知道relativePath是在您编写查询时，但直到查询第一次返回后我才会获得该信息。

为了清晰起见添加了 OnCreateNode 钩子

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  // Add slug to MarkdownRemark node
  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({ node, getNode, basePath: 'library' })
    const hero = (fs.existsSync(path.resolve(__dirname, `src/library/pages/${slug}hero.jpg`))) ? './hero.jpg' : ''

    createNodeField({
      node,
      name: 'slug',
      value: slug,
    })
    createNodeField({
      node,
      name: 'hero',
      value: hero,
    })
  }
}

我意识到我之前的答案不正确且过于复杂（它依赖于节点创建顺序，也不需要向 imageSharp 节点添加字段。这里是the link https://stackoverflow.com/revisions/54283782/1如果有人感兴趣的话。）。这是更好的答案：

查询图像hero与 markdown 位于同一文件夹中的名称

由于主图始终与 markdown 文件位于同一目录，因此我们可以简单地根据其目录进行查询。

            dir              name  ext
┌────────────┴────────────┐ ┌─┴─┐ ┌─┴─┐
absolute/path/to/directory/ hero  .png
absolute/path/to/directory/ index .md

图形查询：

file ( dir: { eq: "absolute/path/to/directory" }, name: { "hero" } ) {
  childImageSharp {
    fixed {
      src
    }
  }
}

您需要对您的gatsby-node.js就是添加这个dir字段到您的页面context所以我们可以将它用作变量。 我们可以得到这个dir通过做path.parse(node.fileAbsolutePath).dir，或者得到dir来自备注父节点的字段getNode(node.parent.id).dir

   +  const { dir } = getNode(node.parent.id)

      createPage({
        path: node.fields.slug,
        component,
        context: {
   +      dir,
          slug: node.fields.slug,
        },
      })

并像这样查询它：

    export const pageQuery = graphql`
   -  query ArticleByPath($slug: String!) {
   +  query ArticleByPath($slug: String!, $dir: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
          id
          htmlAst
          frontmatter {
            title
          }
        }
   +    file (dir: { eq: $dir }, name: { eq: "hero" }) {
   +      childImageSharp {
   +        fixed {
   +          src
   +        }
   +      }
   +    }
      }
    `

并使用它：

    export default function Template({ data }) {
      const post = data.markdownRemark
  +   const hero = data.file ? data.file.childImageSharp : null
      return (
        <div className="landing-page-container">
          <Helmet title={`Your Blog Name - ${post.frontmatter.title}`} />
          <div className="blog-post">
  +         {hero && <img src={hero.fixed.src} alt={post.frontmatter.title} />}
            <h1>{post.frontmatter.title}</h1>
            <div className="blog-post-content">{renderAst(post.htmlAst)}</div>
          </div>
        </div>
      )
    }

Here's 要点article.js and gatsby-node.js. https://gist.github.com/d4rekanguok/e2a67760db7fcd6452538e85d7378120