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
      }
    }
  }
}

Gatsby 中的绝对图像路径 JSON

Absolute Image Paths in Gatsby JSON

javascript

json

image

gatsby

sharp