蓋茨比：優化沒有 'childImageSharp' graphql 字段的圖像

Question

我正在使用帶有 wordpress CMS 的 gatsby 在我的 gatsby web 應用程序上顯示即將發生的事件。我正在使用插件gatsby-source-tribe-events連接到wordpress event calendar插件並獲取事件數據。

問題是我想使用<GatsbyImage/>動態顯示我所有的事件及其描述和圖像。

如您所知，要使用上述組件顯示圖像，每個項目都必須在graphql中有一個childImageSharp字段

我的問題是gatsby-source-tribe-events插件在查詢圖像時沒有childImageSharp字段，所以我無法動態優化所有圖像

有什么解決方法？ 當 childImageSharp 字段不存在時，如何使用 GatsbyImage？ 有沒有辦法將它添加到 graphql 架構中？

Answer 1

有什么解決方法？ 當 childImageSharp 字段不存在時，如何使用 GatsbyImage？

你不能。 GatsbyImage需要childImageSharp節點提供的一定量的數據。

gatsby-source-tribe-events插件似乎完全沒有維護（最后一次提交是 2 年前）所以我認為作者不會升級它。

說你有兩個選擇（至少）：

• 如果檢測到不包含childImage節點的圖像，則呈現標准<img>標記。 在那里你可以應用延遲加載或其他庫的任何其他模糊效果。
• 檢查gatsby-plugin-remote-images以從遠程圖像創建節點。 我不知道這種方法是否符合您的要求，或者它是否可行。

有沒有辦法將它添加到 graphql 架構中？

這就是gatsby-plugin-remote-images會做的。 圖像需要由 Gatsby 的 transformers 和 sharps 處理以創建那些childImageSharp節點