Failed transform relative image

[yudyananda]

Hi, I try to follow the documentation but still no luck. The image field still detected as a sting Field "src" must not have a selection since type "String" has no subfields

Here is my directory

  ↳ content
    ↳ pages
      ↳ homepage.md
    ↳ images
      ↳ foo.jpeg
      ↳ bar.jpeg
  ↳ src
  ↳ static
    ↳ images
      ↳ foo.jpeg
      ↳ bar.jpeg

// gatsby config
plugins: [

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/static/images`, // or ${__dirname}/content/images  
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/content/pages`, // Content pages
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // if using gatsby-remark-relative-images then place it before gatsby-remark-images
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              // [Optional] The root of "media_folder" in your config.yml
              // Defaults to "static"
              staticFolderName: 'static',
              // [Optional] Include the following fields, use dot notation for nested fields
              // All fields are included by default
              include: ['hero.image.src'],
              // [Optional] Exclude the following fields, use dot notation for nested fields
              // No fields are excluded by default
              exclude: ['hero.image.alt'],
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              quality: 100,
              maxWidth: 720,
              linkImagesToOriginal: false,
              backgroundColor: `#edf2f7`,
              disableBgImage: true,
              withWebp: true,
              showCaptions: [`title`, `alt`],
            }
          },
        ]
      }
    },
  ],

---
hero:
   ....
    image:
        src: /images/foo.png
        alt: foo
---

this is my query result

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "id": "ecc01a86-2259-57a4-aff5-26b3cd424fc1",
            "frontmatter": {
              "hero": {
                "intro": "Gunarupa Studio",
                "image": {
                  "src": "/images/astronaut.png"
                }
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

  System:
    OS: Windows 10 10.0.18362
  npmPackages:
    gatsby: ^2.24.57 => 2.24.57
    gatsby-image: ^2.4.16 => 2.4.16
    gatsby-plugin-draft: 0.0.5 => 0.0.5
    gatsby-plugin-manifest: ^2.4.24 => 2.4.24
    gatsby-plugin-netlify-cms: ^4.3.14 => 4.3.14
    gatsby-plugin-offline: ^3.2.24 => 3.2.24
    gatsby-plugin-postcss: ^2.3.11 => 2.3.11
    gatsby-plugin-preact: ^4.0.10 => 4.0.10
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-sharp: ^2.6.35 => 2.6.35
    gatsby-plugin-typescript: ^2.4.19 => 2.4.19
    gatsby-remark-images: ^3.3.29 => 3.3.29
    gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2
    gatsby-source-filesystem: ^2.3.25 => 2.3.25
    gatsby-transformer-remark: ^2.8.32 => 2.8.32
    gatsby-transformer-sharp: ^2.5.13 => 2.5.13
    gatsby-transformer-yaml: ^2.4.11 => 2.4.11
  npmGlobalPackages:
    gatsby-cli: 2.12.97

I try to use content and static directory but none of them working

FYI

• in my previous project i'm using 0.2.3 which have fmImagesToRelative function
• at the moment I haven't used a CMS but the plan is Forestry which i think is similiar to Netlify CMS

For temporary solution i revert the plugin to the version 0.2.3, is ti any step that i missed or the latest version have no support for this kind approach?

[ma-bourassa]

I got almost the same setup. It is also working on 0.3.0 when using fmImagesToRelative
If I update to 2.0.2 I got the error Field "photo" must not have a selection since type "String" has no subfields.
The problem only occurred on Windows 10. If I clone my project on WSL 2, I don't get the error.
Maybe the problem is with Windows 10 path ?
Also, I'm using Forestry CMS.

[hendhyhutomo]

I am experiencing the same issue. After a couple work around I think the Native On Create Node functions is not triggered.

When I copy paste them manually on my gatsby node it works.

[phipag]

Same issue for me only on Windows 10. On Linux and Mac systems it works. Field "image" must not have a selection since type "String" has no subfields.

Any news / fixes?

[emanuele-em]

same issue on windows 11, it's a relative path problem with windows slashes