Файл GatsbyJS имеет значение NULL - установка relativePath не работает

Я пытаюсь вытащить изображение: /src/images/es.png

И отобразить его на странице Гэтсби. Вот код страницы:

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>
)

Вот код конфигурации:

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

Вот моя файловая структура:

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

Я ожидаю, что изображение вырвется, но всегда получаю file: null. Что я делаю неправильно?