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

我正在将 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 中本地引用它们,如果您希望将环境分开。(对于很多图像可能会很慢)

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

以上是Strapi动态区-在Gatsby中显示图像的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>