Strapi 动态区 - 在 Gatsby 中显示图像

如何解决Strapi 动态区 - 在 Gatsby 中显示图像

我正在将 Strapi 与 Gatsby 一起使用，但在动态区域内渲染图像时遇到困难。我正在使用：

Strapi 3.6.2
盖茨比 3.5.1
gatsby-source-strapi 1.0.0
gatsby-plugin-image 1.5.0
gatsby-plugin-sharp 3.5.0
gatsby-transformer-sharp 3.5.0

直接在集合类型中找到的顶级图像字段可以使用 GraphQL 轻松查询以返回 gatsbyImageData，以缩略图字段为例：

query MyQuery {
  allStrapiPage {
    nodes {
      Title
      Body
      thumbnail {
        localFile {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
}

但是，在上面的查询中，Body 是一个动态区域字段，具有数十个可选组件，其中许多包含图像字段。为 Body 返回的数据是标准 JSON 数据，这意味着图像字段没有必需的 gatsbyImageData，请参阅示例响应：

    "Body": [
    {
        "PrimaryImage": {
            "id": 12,"name": "Test Image","alternativeText": "","caption": "","width": 338,"height": 260,"formats": {
                "thumbnail": {
                    "name": "thumbnail_Test Image","hash": "thumbnail_testimage_c3ced5807d","ext": ".png","mime": "image/png","width": 203,"height": 156,"size": 78.25,"path": null,"url": "/uploads/thumbnail_testimage_c3ced5807d.png"
                }
            },"hash": "testimage_c3ced5807d","size": 154.53,"url": "/uploads/testimage_c3ced5807d.png","previewUrl": null,"provider": "local","provider_Metadata": null,"created_at": "2021-04-19T14:20:38.086Z","updated_at": "2021-04-19T14:20:38.133Z","localFile___NODE": "c5a14269-31a2-505a-b2ff-8251e6ca5051"
        },"strapi_component": "sections.task-row"
}
    }]

<StaticImage /> 不接受动态 src，因此我无法使用 url 字段。我必须使用需要 <GatsbyImage/> 对象的 gatsbyImageData。

有什么方法可以修改查询或使用可用于通过 <GatsbyImage /> 获取图像渲染的字段

更新：Strapi 开发人员拥有 confirmed this is not currently possible。不幸的是，我目前最好的解决方案是不使用 gatsby-plugin-image 而是使用 <img src={imagepath} /> 其中 imagepath 直接通过 Strapi 的运行实例引用图像，例如http://localhost:1337/uploads/test-image.png

或者，您可以将图像从 Strapi 文件夹复制到 Gatsby 文件夹的过程包含在构建过程中，以便您可以在 Gatsby 中本地引用它们，如果您希望将环境分开。 （对于大量图像可能会很慢）

仍然希望有更好的解决方案:)

解决方法

对于 Strapi 中的动态区域，我们需要使用 spread operators(...) 后跟 on 然后 __typename 组件 >

例如：

 DynamicZoneName{
...on ComponentName{
            // component values
                   }
   ...on AnotherComponentName{
            // component values
                   }

      }

在您的情况下，新查询应类似于：

query MyQuery {
          allStrapiPage {
            nodes {
              Title
              Body{
                 ... on ComponentPrimaryImage{
                       formats,url,name,id,//any other values you want
                    }
                }
              thumbnail {
                localFile {
                  childImageSharp {
                    gatsbyImageData
                  }
                }
              }
            }
          }
        }

步骤

打开来自 Strapi 应用程序的 Graphql 网址。
编写您的旧查询
在动态区域写入的括号内
```
 ... on 
```
打开自动完成以获取动态区域的链接__typename
参考初始代码块继续

参考this文章了解 graphql 中的动态区域实现