Since the ability to pass variables to StaticQuery is not possible in Gatsby. In this approach we can query all images in advance and use the find() method to determine which image we want to use by its name code example

Example: passing variable in usestaticquery

// Using StaticQuery instead of useStaticQuery

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

export default ({ src }) => {
  <StaticQuery
    query={graphql`
      query HeadingQuery($src: String!) {
         File(relativePath: { eq: $src }) {
           childImageSharp { ...etc }
         }
    `}
    render={data => (
       <Img fixed={data.path.to.query} />
    )}
  />
}