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

Posted 2023-03-08

【中文标题】如何使用 gatsby-image 从数组中查询多个图像？

【英文标题】：How do I query multiple images from an array with gatsby-image?

【发布时间】：2019-11-16 12:24:20

【问题描述】：

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

在尝试使用 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 时我在控制台上收到此消息：

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

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

【问题讨论】：

查看错误信息和资源管理器返回...你试过<Img fluid=document.fluid/>

我尝试了你的建议。当我运行 gastby 开发时，这是我得到的错误：` e:\wamp\www\@flaex_\app\src\templates\work.js 38:9 错误无法在类型“StrapiWorkImages”graphql 上查询字段“childImageSharp” /template-strings ✖ 1 个问题（1 个错误，0 个警告）`这是导致错误的行：link

在 Graphql 操场上，strapi 上的图像的架构是什么？您可以注销data 以便我们查看返回的结构吗？

childImageSharp 是这里的问题，但我不知道 StrapiWorkImages 返回的结构是什么

我还假设您已经安装并配置了gatsby-image 插件？

【参考方案1】：

我查看了 Gatsby 存储库（在 gatsby-source-strapi 插件上），目前这似乎是一个悬而未决的问题。所以这根本不是你做错的事情。不确定这是否会有所帮助？我认为有些人没有。 Image workaround

【讨论】：

我认为链接丢失了。

具体来说，这个问题的解决方法可以找到here