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`,

然后您可以像在MarkdownRemark节点中进行的操作一样，在gatsby-node.js中对其进行转换。

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转换的json也会在其父File节点上附加一个子节点：

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

Gatsby JSON中的绝对图像路径

1 个答案: