如何在Gatsby中为我的可重用组件返回特定的图像？

npm install gatsby gatsby-image gatsby-plugin-sharp gatsby-transformer-sharp

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const MyComponent = () => (
  <StaticQuery
    query={graphql`
      query {
        myImage: file(relativePath: { eq: "images/my-image.jpg" }) {
          childImageSharp {
            fluid(maxWidth: 500) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => (
      <Img fluid={data.myImage.childImageSharp.fluid} alt="My Image" />
    )}
  />
)

export default MyComponent

import React from "react"
import MyComponent from "./MyComponent"

const App = () => (
  <div>
    <h1>My App</h1>
    <MyComponent />
  </div>
)

export default App