Graphql Gatsby graphiQL-无法为不可为null的字段ImageSharpFluid.src返回null

我正在使用盖茨比和graphql以及无头WordPress作为网站

我想使用盖茨比图像插件为来自WordPress的图像获得srcSet和模糊效果，但它在graphiQL中抛出了一个错误。为了更好地理解，我想在下面一步一步地解释整个过程

盖茨比图像插件具有固定和流动性：

要在两者之间做出选择，问问自己：“我知道这张图片的确切尺寸吗？”如果知道，这是第一种类型。如果否及其宽度和/或高度需要根据屏幕大小而变化，则为第二种类型

所以，我需要第二个-流体

它也有静态和动态

如果您使用的图像在每次使用组件时都是相同的，例如徽标或头版英雄图像，则可以使用StaticImage组件

如果需要动态图像（例如，如果它们来自CMS），可以通过GraphQL加载它们，并使用GatsbyImage组件显示它们

我正在使用WordPress（CMS）。所以，我需要第二个-动态

在编写查询之前，我必须了解如何对来自WordPress方案的文件进行正确的查询

出于这个原因，我发现盖茨比有一个从WordPress中提取图像的插件

我已经安装并配置了所有必需的软件包，例如

gatsby plugin image

，

gatsby plugin sharp

，

gatsby transformer sharp

，等等。我所做的一切都完全按照官方文档所说的那样

当时一切都准备好了进行查询，所以我尝试了他们在文档中的第一个示例，并且成功了

因此，是时候最终得到我想要的，并尝试第二个示例（fluid），但它失败了，出现错误消息

无法为不可为null的字段ImageSharpFluid.srcSet返回null。

当我尝试获取

gatsbyImageData

我如何解决这个问题

---

提前感谢。

您提到的盖茨比源wordpress的文档已经过时。签出此项：

您的查询看起来像旧查询。我不确定您运行的插件版本是什么，但如果您运行的是最新版本，您的查询应该如下所示：

query MyQuery {
  allWpPost {
    nodes {
      featuredImage {
        node {
          localFile {
            childrenImageSharp {
              gatsbyImageData(width: 200, placeholder: BLURRED, formats: [AVIF, WEBP, JPG])
            }
          }
        }
      }
    }
  }
}

此外，盖茨比图像插件也被弃用，取而代之的是

如果您想要一个如何组合设置的示例，您可以在启动器中搜索

CMS:WordPress

和

v3

以找到一个开始

---

希望这能让您开始：）

如果您在插件选项中使用了缓存，如下面的代码，请尝试删除工作区中的.cache文件夹，然后重新启动服务器

---

---

---

可能需要花费一些时间来获取图像，然后加载页面时不会出现任何错误。

“#在GraphQL资源管理器中，使用字段名，如“src”。在站点代码中，删除它们#并使用盖茨比提供的片段。src对片段的相同结果注释/评论是关于使用图像道具。。。它们不再公开/严格定义。。。不应该在操场上测试。。。在页面/模板中使用image component或

console.log（）

it，查看consolequery中包含片段的PropsName错误，

localFile

logged？全部无效/部分道具。。。生成日志中的错误？组件道具或数据相关请求中有什么？

{
  resolve: `gatsby-source-wordpress`,
  options: {
    production: {
      hardCacheMediaFiles: true,
    },
  },
},