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

Question

我正在使用 Gatsby 和 Kentico Cloud 为网站优化图像。我想使用gatsby-image插件，但是gatsby-image无法查询url字段。所以我需要从另一个节点上的 CMS 下载这些图像，以便它们可以通过 gatsby-image 查询。

我尝试使用另一个插件 gatsby-plugin-remote-images 来实现它，但到目前为止它还没有奏效。我不确定我是否误解了文档。

这是我来自 gatsby-config 的最新代码

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

我的理解是，我现在应该能够从 GraphiQL 查询 localImage(在重新启动服务器后)并查看下载的文件路径，但这似乎不起作用。

谢谢!

Answer 1

作为 GatsbyJS 的新手，在让它工作之前，我也曾为此苦苦挣扎。首先，我认为您的 imagePath 配置不应包含 data.，它是组件中用于返回 graphQL 结果的变量。从 kenticoCloudItemAbout 开始。如果这不起作用，我发现嵌套的 imagePath 有问题。 (要么我还不明白 imagePath 的正确使用，要么插件不喜欢嵌套结构。)例如，我的 GraphQL 查询/数据结构是这样的:

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

当我使用 { nodeType="myNodes", imagePath="myNodes.edges.node.subitem.subsubitem.imageURL"} 时，我没有任何运气让插件工作。但是，当使用像 { nodeType="subSubItem", imagePath="imageURL"} 这样的 imageURL 直接指向节点时，它起作用了。此外，当您构建 gatsby develop 时，请注意终端中的错误。诸如 imageURL 未指向文件(断开的链接)之类的错误造成了麻烦。最后，请确保您没有在 GraphiQL 窗口中包含 GraphQL 片段(例如 ...GatsbyImageSharpFluid)。在 GraphiQL 中，仅尝试引用 localImage 对象属性来测试插件是否适合您。例如:

{
    allSubSubItem {
      imageURL
      localImage {
         id
      }
    }
 }