如何从graphql查询数据在jsx中创建循环？

Question

正文：graphql查询示例

const data = useStaticQuery(graphql`
    query servicesQuery {
      allFile{
        edges {
          node {
            childImageSharp {
              fluid(maxHeight: 50, maxWidth: 50) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

我需要将此查询的所有图像放入jsx的<img>标记循环中。

Answer 1

使用盖茨比的gatsby-image-plugin

import Img from "gatsby-image"
return (
 {data.allFile.edges.map(img => (
     <Img
         fluid={img.node.childImageSharp.fluid}
         alt="image"
     />
  ))}
)