3

我正在使用 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'
  }
}

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

谢谢！

4

2 回答 2

2

作为 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"}我没有任何运气让插件工作。但是，当使用我的 imageURL 直接指向节点时{ nodeType="subSubItem", imagePath="imageURL"}，它起作用了。此外，在构建时注意终端中的错误gatsby develop。诸如 imageURL 未指向文件（断开的链接）之类的错误会导致麻烦。最后，请确保您的 GraphiQL 窗口中没有包含 GraphQL 片段（例如...GatsbyImageSharpFluid）。在 GraphiQL 中，仅尝试引用localImage对象属性来测试插件是否适合您。例如：

{
    allSubSubItem {
      imageURL
      localImage {
         id
      }
    }
 }
于 2019-04-29T02:23:26.670 回答
0

可能您现在已经找到了解决方案。

如果没有，我可以让远程图像与 gatsby-image 一起使用。我也尝试过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,
        },
    },
  ],

我的gatsby-node.js：

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,
                    })
                },
            },
        },
    })
}

现在我可以像这样查询要与 gatsby-image 一起使用的图像：

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

真正了解远程 API 的 GraphQL Schema 很重要。在 GraphiQL 中查看它。在我的例子中，解析器创建了一个名为imageFileat的新节点Webiny_BlogPost。一般来说，这应该在 中完成typeName_SchemaSubType，其中下划线之前的部分是您在其中typeName定义的，gatsby-source-graphql下划线之后的部分是该源中的模式子类型，您希望在其中创建图像（文件）节点。当您查询它时，请保留请记住，您还需要使用远程图像 url 查询节点（在我的情况下headerImage）以使其工作。

于 2020-10-11T14:50:43.927 回答