How to Resolve YAML Absolute Image Paths in Gatsby Using gatsby-remark-relative-images

Gatsby gatsby-remark-relative-images does not convert YAML absolute image path to relative

If you are using Gatsby with gatsby-remark-relative-images and facing issues with converting absolute image paths in YAML files to relative paths, you’re not alone. This problem arises when the absolute paths are provided by Netlify CMS and need to be queried using GraphQL in Gatsby.

In Markdown files, gatsby-remark-relative-images handles the conversion of absolute image paths to relative paths without any issues. However, when it comes to YAML files, the same conversion does not apply.

Understanding the Configuration

Let’s take a look at the relevant configuration files to understand what might be causing this problem:

gatsby-config.js

In the gatsby-source-filesystem plugin options, ensure that the correct paths are specified for the image files:

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/static/img`,
    name: 'uploads',
  },
},

Make sure the path matches the location of your static image files.

gatsby-node.js

Inspect the onCreateNode function in your gatsby-node.js file to ensure that the image paths are being converted correctly:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)
  
  // ...
}

Verify that the fmImagesToRelative function is being called properly and that it is converting the image paths as expected.

static/admin/config.yml

Check your Netlify CMS configuration file to confirm the correct media_folder and public_folder values are set:

media_folder: static/img
public_folder: /img

Ensure that these paths match the location of your image files and where they are publicly accessible from.

Troubleshooting the GraphQL Error

The GraphQL error you are encountering – “Field ‘image’ must not have a selection since type ‘String’ has no subfields” – indicates an issue with resolving the image field in your GraphQL query.

To resolve this, you can customize the GraphQL schema and make the ‘image’ field reference the image file node instead. Here’s an example of how you can achieve this:

exports.createSchemaCustomization = async ({ actions }) => {
  const { createTypes } = actions

  const typeDefs = `
    type YamlSliderDesktop @infer {
      image: File @fileByStaticPath
    }

    type YamlSlider @infer {
      desktop: YamlSliderDesktop
    }

    type PagesYaml implements Node @infer {
      slider: YamlSlider
    }
  `

  createTypes(typeDefs)
}

Ensure that you replace the type names and fields in the code example with the correct ones used in your project. Refer to your GraphQL endpoint to find the correct type names.

Alternative Solution

If you find yourself frequently encountering issues with absolute image paths, you can use the gatsby-schema-field-absolute-path plugin. This plugin allows you to easily customize your GraphQL schema to resolve image paths. You can find the plugin on GitHub and read more about it on my blog.

Conclusion

Resolving the conversion of absolute image paths to relative paths in YAML files with gatsby-remark-relative-images requires attention to configuration details at multiple levels. By ensuring correct file paths, converting image paths in gatsby-node.js, and customizing the GraphQL schema, you can overcome these issues and successfully query your images using GraphQL in Gatsby.

I hope this troubleshooting guide helps you tackle the problem. Happy coding!

reference : 

reactjs