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

Question

我将 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",
            "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/> 这需要 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 中本地引用它们。 （对于很多图像可能会很慢）

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

Answer 1

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

例如：

 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。

• 写下你的旧查询

• Dynamic Zone 括号内写

   ... on 
  

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

• 参考初始代码块继续进行

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