如何使用gatsby-image从一个数组中查询多个镜像？

Question

我有一个通过Strapi API端点可用的作品集合。每件作品都有一个包含多个图像的数组。我想用gatsby-image来渲染它们，但我不知道该怎么做，因为文档上所有可用的示例都是由"images“文件夹中的单个文件或静态文件组成的。

当尝试GraphiQL浏览器时，我意识到缩略图在'id‘键上有这个值：

"thumbnail": {
          "id": "e:/wamp/www/@flaex_/app/.cache/gatsby-source-filesystem/52e3542d00600c96e52cb584e83c2cae.jpg absPath of file"}

这意味着该图像已注册到gatsby缓存中。在另一边，数组的每个图像上的'id‘键显示如下：

"images": [
          {
            "id": "5d0d7429fe6de132d43a44b4",
            "url": "/uploads/01d8a893fe4c46738b1c99624d22154d.jpg"
          },
          {
            "id": "5d0d7429fe6de132d43a44b3",
            "url": "/uploads/eb399dfadea74b9db39672a1f98575ff.jpg"
          }
        ]

我是不是漏掉了什么？

这是我正在使用的模板：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import containerStyles from "../pages/portfolio.module.less"

const WorkTemplate = ({ data }) => (
  <Layout>
    <div className={containerStyles.navsec}>
      <button onClick={() => window.history.back()}>&#60;&#60; back</button>
    </div>
    <article>
      <h1>{data.strapiWork.title}</h1>      
      <Img fluid={data.strapiWork.thumbnail.childImageSharp.fluid} />
      <p>{data.strapiWork.description}</p>
      {console.log(data.strapiWork.images)}      
      <ul className={containerStyles.works}>
          {data.allStrapiWork.images.map(document => (
            <li key={document.id}>              
               <Img fluid={document.image.childImageSharp.fluid} />

            </li>
          ))}
        </ul>       
    </article>
  </Layout>
)

export default WorkTemplate

export const query = graphql`
  query WorkTemplate($id: String!) {
    strapiWork(id: { eq: $id }) {
      id
      title
      description
      images {        
        childImageSharp {
          fluid(maxWidth: 120) {
            ...GatsbyImageSharpFluid
          }
        }       
      }
      thumbnail {
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid
          }
        }
      }      
    }
  }
`

我认为这是不起作用的，因为'images‘是一个数组。

缩略图呈现良好，可以看到，我试图复制缩略图上使用的graphQL查询，但在运行gatsby develop时在控制台上收到以下消息

error GraphQL Error遇到1个错误：-类型'StrapiWorkImages‘上的未知字段'childImageSharp’。

我将非常感谢在这方面的任何帮助。谢谢!

Answer 1

我看过Gatsby repo (在gatsby-source-strapi插件上)，它现在似乎是一个悬而未决的问题。所以这根本不是你做错的事情。不确定这是否会有帮助？我认为对一些人来说还没有。Image workaround