javascript - 带有静态查询的盖茨比图像

Question

我第一次尝试 GatsbyJs，我看到了 ImageSharp 用于优化图像的功能。

现在，我创建了一个组件，它工作正常，但我想优化代码以添加更多图像。

代码以这种方式组织：我有组件 images.js，在索引页面中导入该组件。此时组件中有2张图片（1.jpg，2.jpg）

我想创建单个组件图像的两个返回，请参见images.js下面的组件代码：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Image from "gatsby-image"

const ImagesHome = () => {
  const data = useStaticQuery(graphql`
    query BioQuery {
      imgOne: file(absolutePath: { regex: "/1.jpg/" }) {
        childImageSharp {
          fixed(width: 710) {
            ...GatsbyImageSharpFixed
          }
        }
      }
      imgTwo: file(absolutePath: { regex: "/2.jpg/" }) {
        childImageSharp {
          fixed(width: 710) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)



  return (
    <div>
      <Image
      fixed={data.imgOne.childImageSharp.fixed}
      />


    <div id="secondImageHome">
      <Image

        fixed={data.imgTwo.childImageSharp.fixed}
      />
    </div>

    </div>
  )
}

export default ImagesHome

我会在单个代码中使用导出组件图像，例如：

<Img fluid={props.data.imageOne.childImageSharp.fluid} />
<Img fluid={props.data.imageTwo.childImageSharp.fluid} />

我的代码可以吗？我在 YouTube 上尝试了一些教程，但没有奏效。