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

【问题标题】：How do i create a loop in jsx from a graphql query data?如何从 graphql 查询数据在 jsx 中创建循环？
【发布时间】：2020-05-20 07:27:24
【问题描述】：

正文：graphql 查询示例

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

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

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

使用 gatsby 的 gatsby-image-plugin

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

【讨论】：