image - gatsby : 优化没有'childImageSharp' graphql 字段的图像

Question

我正在使用 gatsby 和 wordpress CMS 在我的 gatsby 网络应用程序上显示即将发生的事件。我正在使用插件gatsby-source-tribe-events连接到wordpress event calendar插件并获取事件数据。

问题是我想动态显示我的所有事件及其描述和图像，使用<GatsbyImage/>.

如您所知，要使用上述组件显示图像，每个项目都必须有一个childImageSharp字段graphql

我的问题是该gatsby-source-tribe-events插件在查询图像时没有childImageSharp字段，所以我无法动态获取所有图像 OPTIMIZED

什么是解决方法？当 childImageSharp 字段不存在时，如何使用 GatsbyImage？有没有办法将它添加到 graphql 模式？

标签： imagegraphqlgatsbygatsby-imagedynamic-image-generation

Answer 1

什么是解决方法？当 childImageSharp 字段不存在时，如何使用 GatsbyImage？

你不能。需要节点GatsbyImage提供一定数量的数据。childImageSharp

gatsby-source-tribe-events插件似乎完全无人维护（2 年前最后一次提交）所以我认为作者没有升级它。

说你有两个选择（至少）：

• <img>如果检测到不包含childImage节点的图像，则呈现标准标记。在那里，您可以使用另一个库应用延迟加载或任何其他模糊效果。
• 检查gatsby-plugin-remote-images以从远程图像创建节点。我不知道这种方法是否符合您的要求或者是否可行。

有没有办法将它添加到 graphql 模式？

这就是gatsby-plugin-remote-images将要做的。图像需要由 Gatsby 的转换器和锐器处理以创建这些childImageSharp节点