如何在 gatsby 中获取特色图像的绝对路径？答案

【问题标题】：How to get absolute path of a featured image in gatsby?如何在 gatsby 中获取特色图像的绝对路径？
【发布时间】：2021-02-09 08:23:24
【问题描述】：

在我的createSchemaCustomization 中，我定义了类型

  const typeDefs = `
    type MarkdownRemark implements Node @dontInfer {
      htmlAst: Object!
      frontmatter: Frontmatter!
      fields: Fields!
    }
    
    type Frontmatter @dontInfer {
      updatedAt: Date!
      createdAt: Date!
      path: String!
      title: String!
      description: String!
      keywords: String
      layout: String
      content: Boolean
      categories: [String]
      featuredImage: File @fileByDataPath
    }
    
    type Fields @dontInfer {
      sourceInstanceName: String!
    }
  `

还有createFieldExtension

  createFieldExtension({
    name: 'fileByDataPath',
    extend: () => ({
      resolve: async function(src, args, context, info) {
        const partialPath = src.featuredImage
        if (!partialPath) return null
        const filePath = `hardcoded full path/img.png`
        const a = context.nodeModel.getAllNodes({type: `allMarkdownRemark`})
        console.log(`>>a`, a) // Empty array
        const fileNode = await context.nodeModel.runQuery({
          firstOnly: true,
          type: 'File',
          query: {
            filter: {
              absolutePath: {
                eq: filePath,
              },
            },
          },
        })
        console.log(`fileNode`, fileNode) // Some object
        return fileNode

      },
    }),
  })

然后在我的降价中我有

---
featuredImage: ./img.png
---

我遇到的问题是在context.nodeModel.runQuery 中获取图像./img.png 的绝对路径。我试图从allMarkdownRemark 获取所有帖子，但是是空数组，不知道我还能做什么？

关于如何获取此图像的绝对路径的任何想法？首先我需要获取markdown文件的绝对路径，但不知道怎么做。

在createFieldExtension.extend.resolve 中，我只能访问frontmatter 对象，它只包含路径，但那是帖子的url 路径。我正在考虑基于此查询具有该路径的所有降价文件，然后以某种方式获取文件路径，但 allMarkdownRemark 正在返回空数组。

此外，默认情况下 gatsby 似乎不起作用，因为我在类型中使用 @dontInfer。

【问题讨论】：

你应该试试context.nodeModel.getAllNodes({type: MarkdownRemark})，因为allMarkdownRemark是根查询而不是节点类型

标签： gatsby

【解决方案1】：

我最终将featuredImage 放在了MarkdownRemark 上，这样我就可以获得降价的文件路径。

还是有点老套，所以如果你有更好的想法，请告诉我。


export const createSchemaCustomization = ({actions}) => {
  const {createFieldExtension, createTypes} = actions

  createFieldExtension({
    name: 'fileByDataPath',
    extend: () => ({
      resolve: async function(src, args, context, info) {
        const partialPath = src.frontmatter.featuredImage
        if (!partialPath) return null
        const absolutePath = path.resolve(path.dirname(src.fileAbsolutePath), partialPath).replace(/\\/g, `/`)
        const fileNode = await context.nodeModel.runQuery({
          firstOnly: true,
          type: 'File',
          query: {
            filter: {
              absolutePath: {
                eq: absolutePath,
              },
            },
          },
        })
        return fileNode
      },
    }),
  })

  const typeDefs = `
    type MarkdownRemark implements Node @dontInfer {
      htmlAst: Object!
      frontmatter: Frontmatter!
      fields: Fields!
      featuredImage: File @fileByDataPath
    }
    
    type Frontmatter @dontInfer {
      updatedAt: Date!
      createdAt: Date!
      path: String!
      title: String!
      description: String!
      keywords: String
      layout: String
      content: Boolean
      categories: [String]
      featuredImage: String
    }
    
    type Fields @dontInfer {
      sourceInstanceName: String!
    }
  `
  createTypes(typeDefs)
}

【讨论】：