Gatsby JSON 中的绝对图像路径

Posted 2023-03-06

【中文标题】Gatsby JSON 中的绝对图像路径

【英文标题】：Absolute Image Paths in Gatsby JSON

【发布时间】：2019-07-06 11:41:53

【问题描述】：

我正在使用 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 图像节点？

【问题讨论】：

你解决了吗？你介意分享你的解决方案吗？我也有同样的挣扎……

【参考方案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
      
    
  

【讨论】：

谢谢。这种方法看起来是正确的，但无论我做什么，我都无法让 Gatsby 将路径转换为 ​​File 节点，即使我使用了另一个正确转换的 frontmatter 图像的路径。它只是忽略该值并将其保留为字符串。

@Undistraction 没有更多上下文很难判断，但我认为问题可能在于，如果 gatsby 找到一个其字段未链接到文件的节点，它将假定该字段的类型对于所有其他节点（相同节点类型）。你的项目碰巧是开源的吗？或者你能在一个小仓库中复制这个问题吗？