Gatsby Image component

image.jsx

import React from 'react'
import Img from 'gatsby-image'
import { graphql, useStaticQuery } from 'gatsby'

const query = graphql`
  query {
    images: allFile(filter: { extension: { regex: "/jpeg|jpg|png|gif/" } }) {
      edges {
        node {
          extension
          relativePath
          childImageSharp {
            fluid(maxWidth: 768) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
      }
    }
  }
`

const Image = ({ src, ...props }) => {
  const { images } = useStaticQuery(query)

  const file = images.edges.find(image => image.node.relativePath === src)

  return <Img fluid={file.node.childImageSharp.fluid} {...props} />
}

export default Image

index.js

import React from 'react'
import Layout from 'components/layout'
import Image from 'components/image'

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <Image src="images/me.jpg" />
  </Layout>
)

export default IndexPage