javascript - Gatsby JSON 中的绝对图像路径

Question

我正在使用 gatsby-transformer-json 在 Gatsby 中查询 JSON 文件。 JSON 文件中有图像 URL，但它们是绝对文件路径，Gatsby 只会将相对路径转换为图像节点。

我的 JSON:

{
  "defaultImage": "images/defaultImage.jpg"
}

我的查询:

metadataJson {
  defaultImage {
    childImagageSharp {
      fixed(width: 3200, height: 2133) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}

然而，由于 Gatsby 遇到的是绝对路径，并且由于它不是相对路径，因此它不会将其转换为 Sharp 图像节点，因此失败并出现错误。

如果它是一个 Markdown 文件，我可以自己转换路径并将其保存到 Markdown 节点的 fields 对象中。但是，对于 gatsby-transformer-json，我无法使用该选项。

如何转换 JSON 文件中的绝对路径，以便 Gatsby 将路径替换为 Sharp 图像节点？

Answer 1

你可以在任何类型的节点上使用createNodeField，而不仅仅是markdown remark。

如果您像下面这样设置 gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/meta`, <-- folder name is used to create node type name, i.e `MetaJson`
    name: `meta`, <-- doesn't affect json node's type name
  },
},
`gatsby-transformer-json`,

然后您可以在 gatsby-node.js 中转换它们，就像使用 MarkdownRemark 节点一样。

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MetaJson`) {
    const relativePath = ...

    createNodeField({
      node,
      name: `foo`,
      value: relativePath,
    })
  }
}

也可以传入additional options进入 gatsby-transformer-json 以更精细地控制 json 节点的内部类型名称。

---

就像 gatsby-transformer-remark 转换的 markdown 一样，gatsby-transformer-json 转换的 jsons 也会将子节点附加到其父文件节点上:

{
  file( sourceInstanceName: { eq: "meta" } ) {
    dir
    childMetaJson {
      fields {
        foo
      }
    }
  }
}