Question

我目前onCreateNode中的gatsby-node.js是在某些节点创建后对其进行修改。我想做的一件事是将图像（或另一种文件类型）附加到节点。假设图像存在于文件系统的其他位置，我可以通过调用名为getImageForNode(node)的（异步）函数来获取其绝对路径，然后如何将其附加到我的节点上，以便：

在构建过程中将其移至/static/中，以便可以由网站提供服务。
它被识别为图像，因此我可以访问其宽度/高度/ url以及我可能需要的任何其他元数据（我不需要调整其大小，但是我不介意是否可以做到这一点也是如此）。

gatsby-source-filesystem具有createRemoteFileNode功能，但仅适用于通过互联网提供的图像（我并不真的想为此设置本地http服务器，并且它似乎不支持file://）。

Answer 1

Gatsby附带了一些可以帮助您的插件：

gatsby-source-filesystem会将文件数据提取到您的gatsby应用中， gatsby-transformer-sharp将要求gatsby-plugin-sharp处理图像并将其复制到公共文件夹。

您可以通过将相对路径添加为该节点中的字段来请求gatsby将文件链接到另一个节点。您也可以手动链接。

设置

您需要让gatsby知道文件的位置：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: absolute/path/to/a/directory,
    name: `anything`,
  },
},

path: path.resolve(__dirname, '../../images')

向现有节点添加相对路径

假设您有一个Json节点，由gatsby-transformer-remark或其他gatsby的官方插件创建，则可以向其中添加新字段：

    const fileAbsolutePath = /* find this node's absolute path */
    const imageAboslutePath = /* do your get absolute path thing */
    const imageRelativePath = path.relative(fileAbsolutePath, imageAboslutePath)

    createNodeField({
      node,
      name: `image`,
      value: imageRelativePath,
    })

这会将新字段image链接到“文件”节点，您可以在其中找到包含图像信息的imageSharp节点。

然后您可以像查询

query {
  markdownRemark {
    fields {               <-- fields created by `createNodeField` will live here
      image {              <-- point to a file node
        childImageSharp {  <-- point to imageSharp node of this file
          fixed {
            width          <-- see more info in gatsby-plugin-sharp documentation
            height
            srcSet
            src
          }
        }
      }
    }
  }
}

手动链接节点

如果您要修改的节点没有文件，则必须手动链接它。 createNodeField仍然可以使用，但是您必须传递目标节点的ID。尚未记录。

    createNodeField({
      node,
      name: 'target___NODE', <--- `___NODE` will resolve to another node
      value: targetNode.id,
    })

您可以在此other answer of mine中找到更详细的代码示例。

使用盖茨比将图像附加到节点的规范方法是什么？

1 个答案:

设置

向现有节点添加相对路径

手动链接节点