GatsbyJS file is null - setting relativePath doesn't work

I'm attempting to pull an image: /src/images/es.png

And to display it on a gatsby page. Here's the page code:

import React from "react"
import {
  Header,
  Image,
} from 'semantic-ui-react';
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '@/components/layout'
import SEO from '@/components/seo'

export const query = graphql`
  query {
    file(
      relativePath: { eq: "images/es.png" },
      sourceInstanceName: {
        eq: "images"
      }
    ) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

export default ({ data }) => (
  <Layout>
    <SEO title="Earthshaker" />
    <div style={{ height: '100%' }}>
      <Header
        as="h1"
        style={{
          color: 'white',
        }}
      >
        Earthshaker
      </Header>
      { JSON.stringify(data) }
      {/* <Img fixed={data.file.childImageSharp.fixed} /> */}
    </div>
  </Layout>
)

Here's the config code:

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,

Here's my file structure:

- src
 - images
  - es.png
 - components
  - heroes
   - earthshaker <---- (this is the page code HERE)

I'm expecting the image to get pulled out but I always get file: null. What am I doing wrong?