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备注。

如果你像下面这样设置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
      }
    }
  }
}