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

Question

我正在将 Strapi 与 Gatsby 一起使用，并且在动态区域内渲染图像有困难。我在用：

• 斯特拉皮 3.6.2
• 盖茨比 3.5.1
• gatsby-source-strapi 1.0.0
• 盖茨比插件图像 1.5.0
• gatsby-plugin-sharp 3.5.0
• 盖茨比变压器夏普 3.5.0

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

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

但是，在上面的查询中Body是一个动态区域字段，其中包含数十个可选组件，其中许多包含图像字段。为 Body 返回的数据是标准 JSON 数据，这意味着图像字段没有 required 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",
            "ext": ".png",
            "mime": "image/png",
            "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/>which requires gatsbyImageDataobject.

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

---

更新： Strapi 开发人员已确认目前这是不可能的。不幸的是，我目前最好的解决方案是不使用gatsby-plugin-image，<img src={imagepath} />而是imagepath直接通过 Strapi 的运行实例引用图像，例如 http://localhost:1337/uploads/test-image.png

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

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

Answer 1

对于 Strapi 中的动态区域，我们需要使用 展开运算符(...)，然后使用组件的__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 url。

• 写下您的旧查询

• 在动态区域的括号内写入

   ... on 
  

• 打开自动完成以获取动态区域的链接__typename

• 请参阅初始代码块继续操作

请参阅本文以了解 graphql 中动态区域的实现