如何从Gatsbyjs中另一个节点的url字段下载图像，以便我可以使用gatsby图像？

我正在为一个使用盖茨比和肯蒂科云的网站进行图像优化。我想使用

gatsby image

插件，但是

gatsby image

无法查询url字段。因此，我需要从另一个节点上的CMS下载这些图像，以便可以通过

gatsby image

查询它们

我曾尝试使用另一个插件来实现这一点，

gatsby-plugin-remote-images

，但到目前为止还没有成功。我不确定我是否误解了文档

这是我在盖茨比配置中的最新代码

{
  resolve: `gatsby-plugin-remote-images`,
  options: {
    nodeType: 'kenticoCloudItemAbout',
    imagePath: 'data.kenticoCloudItemAbout.elements.main_image.value[0].url'
  }
}

我的理解是，我现在应该能够从GraphiQL查询

localImage

（重新启动服务器后），并查看下载的文件路径，但这似乎不起作用

---

谢谢

作为《盖茨比》的新手，我在让它发挥作用之前也在努力解决这个问题。首先，我不认为imagePath配置应该包括

数据。

这是组件中用于返回graphQL结果的变量。从

kenticoCloudItemAbout

开始。如果这不起作用，我发现嵌套的imagePath有问题。（要么我还不了解imagePath的正确用法，要么插件不喜欢嵌套结构。）例如，我的GraphQL查询/数据结构如下：

  {
  allMyNodes{
    edges {
      node {
            levelOneField
            subItem {
              levelTwoField
              subSubItem {
                imageURL
              }
            }
          }
        }
      }
    }

当我使用

{nodeType=“myNodes”，imagePath=“myNodes.edges.node.subitem.subsubsubitem.imageURL”}

时，我没有任何运气让插件工作。但是，当直接指向带有我的imageURL的节点时，如

{nodeType=“subSubItem”，imagePath=“imageURL”}

，它起作用了。此外，在构建

gatsby develope

时，还要注意终端中的错误。imageURL等错误未指向文件（断开的链接）导致了问题。最后，确保在GraphiQL窗口中没有包含GraphQL片段（如

…GatsbyImageSharpFluid

）。在GraphiQL中，仅尝试引用

localImage

对象属性来测试插件是否为您工作。例如：

{
    allSubSubItem {
      imageURL
      localImage {
         id
      }
    }
 }

---

也许你现在已经找到了解决办法

如果没有的话，我就可以用盖茨比图像处理远程图像。我也尝试了

gatsby plugin remote images

，但没有成功。我的工作是为我的远程API创建一个解析器（我的远程cms源代码在

gatsby source graphql

，我使用Webiny cms），如下所示：

在

gatsby config.js

中：

plugins: [
       {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'images',
            path: '${__dirname}/src/images',
        },
         },
    {
        resolve: 'gatsby-source-graphql',
        options: {
          typeName: "Webiny",
          fieldName: "webinyHeadlessCms",
          url: "https://XXXXXXXXXXX.cloudfront.net/cms/read/production",
          headers: {
            authorization: "XXXXXXXXXXXXXXXXXXXX"
          },
          refetchInterval: 60,
        },
    },
  ],

const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

exports.createResolvers = ({actions,cache,createNodeId,createResolvers,store,reporter,}) => {
    const { createNode } = actions
    createResolvers({
        Webiny_BlogPost: {
            imageFile: {
                type: `File`,
                resolve(source, args, context, info) {
                    return createRemoteFileNode({
                        url: source.headerImage,
                        store,
                        cache,
                        createNode,
                        createNodeId,
                        reporter,
                    })
                },
            },
        },
    })
}

和my

gatsby node.js

：

plugins: [
       {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'images',
            path: '${__dirname}/src/images',
        },
         },
    {
        resolve: 'gatsby-source-graphql',
        options: {
          typeName: "Webiny",
          fieldName: "webinyHeadlessCms",
          url: "https://XXXXXXXXXXX.cloudfront.net/cms/read/production",
          headers: {
            authorization: "XXXXXXXXXXXXXXXXXXXX"
          },
          refetchInterval: 60,
        },
    },
  ],

const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

exports.createResolvers = ({actions,cache,createNodeId,createResolvers,store,reporter,}) => {
    const { createNode } = actions
    createResolvers({
        Webiny_BlogPost: {
            imageFile: {
                type: `File`,
                resolve(source, args, context, info) {
                    return createRemoteFileNode({
                        url: source.headerImage,
                        store,
                        cache,
                        createNode,
                        createNodeId,
                        reporter,
                    })
                },
            },
        },
    })
}

现在我可以查询图像，以便与盖茨比图像一起使用，如下所示：

export const query = graphql`{
    webinyHeadlessCms {
        listBlogPosts {
            data {
                headerImage
                imageFile {
                    childImageSharp {
                        fluid (quality: 100, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                        }
                    }
                }
            }
        }
    }
}`

真正理解远程API的GraphQL模式非常重要。在GraphiQL中查看它。在我的例子中，解析器在

Webiny\u BlogPost

处创建一个名为

imageFile

的新节点。一般来说，这应该在

typeName\u SchemaSubType

中完成，其中下划线前的部分是

gatsby source graphql

中定义的

typeName

，下划线后的部分是该源中的模式子类型，您要在中创建图像（文件）节点。 当您查询它时，请记住，您还需要使用远程图像url查询节点（在我的示例中是

headerImage

），以使其正常工作