Gatsby 什么'；使用盖茨比将图像附加到节点的标准方法是什么？

我目前正在

gatsby node.js

中

onCreateNode

修改一些创建后的节点。我想做的一件事是将图像（或者其他类型的文件）附加到节点。假设映像存在于文件系统的其他位置，我可以通过调用名为

getImageForNode（node）

的（异步）函数来获取其绝对路径，然后如何将其附加到我的节点，以便：

在构建过程中，它被移动到

/static/

，这样网站就可以为它提供服务

它被认为是一个图像，所以我可以访问它的宽度/高度/url以及我可能需要的任何其他元数据（我不需要调整它的大小，但我不介意这是否成为可能）

---

gatsby源文件系统

有一个

createRemoteFileNode

功能，但它只适用于通过internet提供的图像（我真的不想为此设置本地http服务器，而且它似乎不支持

文件：//

）。

gatsby源文件系统

将文件数据拉入您的gatsby应用程序，

gatsby transformer sharp

将要求

gatsby plugin sharp

处理您的图像并将其复制到公用文件夹

您可以要求盖茨比将文件链接到另一个节点，方法是在该节点中添加一个相对路径作为字段。您也可以手动链接它

设置 您需要让盖茨比知道您的文件的位置：

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

---

---

您可以在此找到更详细的代码示例。

谢谢Derek。虽然不是我想要的，但这对于处于类似情况的人来说是非常彻底的。在我的例子中，在调用

getImageForNode

之前，这些文件实际上并不存在，因此有关配置

gatsby源文件系统的常规建议不起作用。我现在可以用了，所以我会写下我所做的并更新这个。哦，我错过了！我认为处理这个问题的标准方法是调用
getImageForNode
，在预引导步骤中将文件拉入文件夹。期待着看到你如何处理它@AndrewIngram看起来您可以获取图像并将其添加到
setFieldsOnGraphQLNodeType
hook中的节点。我发现了一个复杂的例子。不知道你是否也做过类似的事情，因为这可能是最经典的！最后我这样做了：虽然感觉有点黑客，但我认为使用
setFieldsOnGraphQLNodeType
更优雅，因为这意味着如果不查询字段，我可以避免生成图像的开销。@AndrewIngram干得好，我认为这是一个很棒的插件。美丽的博客顺便说一句！编辑：哦，已经有了。但是有一个可以接受设计模板的东西会很酷。
    createNodeField({
      node,
      name: 'target___NODE', <--- `___NODE` will resolve to another node
      value: targetNode.id,
    })