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上尝试了一些教程，但是没有用。

带有staticQuery的盖茨比图片

0 个答案: