Плагин изображения Гэтсби не работает должным образом для моего веб-сайта

Question

У меня есть проект gatsby , и я использую плагин gatsby-image для показа изображений . Вот мой файл gatsby-config. js:

module.exports={
 plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src`
      }
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      plugins:[
        'gatsby-remark-relative-images',
        {
          resolve: 'gatsby-remark-images',
          options: {
            maxWidth: 750,
            LinkImagesToOriginal: false
          }
        },
      ]
    },
 ]
}

Я также установил gatsby-image, gatsby-transformer-sharp, gatsby-plugin-sharp npm пакетов успешно. Я также перезагрузил сервер разработки.

Я также поместил изображение s.png в путь src / images из папки root.

Это мое GraphiQl изображение: