GatsbyJS:从WPGraphQL查询高级自定义字段的Gatsby-image

Question

我正试图在我的GatsbyJS站点上显示一堆来自ACF图像字段的图像。在我的网站上使用Gatsby Image时，它返回null。我可能遗漏了一些明显的东西。

我尝试过用各种方式改变我的graphql查询，比如用remoteFile代替localFile，传入srcSetWebp等等，但似乎都不适用于我。

任何帮助都将不胜感激。

我的graphql查询

 {
  allWpPage {
    nodes {
      ACFgraphql {
        logoGrid {
          img9 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img8 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img7 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img6 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img5 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img4 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img3 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img2 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img12 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  srcSetWebp
                }
              }
            }
          }
          img11 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img10 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
          img1 {
            localFile {
              childImageSharp {
                fixed(width: 104, height: 104) {
                  ...GatsbyImageSharpFixed_withWebp
                }
              }
            }
          }
        }
      }
    }
  }
}

然后，我尝试使用Gatsby-image Img-tag在我的网站上显示图像。Gatsby-image的版本为2.11.0：

<Img fixed={data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1} />

当我执行console.log(数据)时，它只是返回null。截图：https://p221.p4.n0.cdn.getcloudapp.com/items/kpuK4ej6/19a9fe22-f210-48c8-a27b-3095fed974fe.png?source=client&v=3259d89b2c9f4fccd8edf69c38f7013e

返回数据的graphiql IDE屏幕截图：https://p221.p4.n0.cdn.getcloudapp.com/items/QwuE4O7Q/4c664ef7-6fbe-4e4b-b533-79102a19ee53.png?v=bd25208826d6b8afa6a575075717d713

Answer 1

second screehnshot显示了一个带有gatsbtImageData的v3结构，所以我强烈建议使用GatsbyImage而不是Img (v2)，因为这里的版本不匹配，因为查询看起来很好，并且返回了所需的数据。基本上，您正在查询一个v3图像并试图将其打印为v2，此外，这是错误的(正如我将指出的)。

有关安装和配置过程，请查看gatsby-plugin-image指南。

在这一重大更改中，您的Img不会打印所需的数据，因为它不能打印，因为两个对象包含的信息不同。v2 Img应如下所示：

<Img fixed={data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1.fixed} />

注意：fixed props正在打印fixed图像。现在，您没有这些数据，因此混合这两种方法永远不会起作用。

您的组件应如下所示：

  {data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1 && 
    <GatsbyImage image={data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1.localfile.childImageSharp.gatsbyImageData} alt="some alt text" />
  }

由于您接收的是null值(根据屏幕截图)，因此您需要添加data.allWpPage.nodes[0].ACFgraphql.logoGrid.img1条件，以避免打印null值，从而避免出现意外，或者添加optional chaining proposal (如果已安装)，如下所示：

 <GatsbyImage image={data?.allWpPage?.nodes[0]?.ACFgraphql?.logoGrid?.img1?.localfile?.childImageSharp?.gatsbyImageData} alt="some alt text" />