Question

我有一些可通过Strapi API端点进行访问的作品集。每个作品都有一个包含多个图像的数组。我想使用gatsby-image渲染它们，但是我不知道该怎么做，因为docs上所有可用的示例都是使用“ 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
          }
        }
      }      
    }
  }
`

我认为这不起作用，因为“图像”是一个数组。

缩略图效果很好，可以看出我试图复制缩略图上使用的graphQL查询，但是运行gatsby develop时，我在控制台上收到此消息：

错误GraphQL错误遇到1个错误：-类型'[StrapiWorkImages]'上的未知字段'childImageSharp'。

在这方面的任何帮助，我将不胜感激。谢谢！

Answer 1

我查看了盖茨比仓库（在gatsby-source-strapi插件上），目前看来这是一个未解决的问题。因此，这根本不是您做错的事情。不确定这是否有帮助？我认为对于某些事情来说还没有。 Image workaround

如何使用gatsby-image查询数组中的多个图像？

1 个答案: