Gatsby and Netlify CMS Image Widget: Is it possible to use an image or a url string?

Question

I'm using Gatsby and Netlify CMS for an image upload. I'm using the image widget and when I upload an image to the media library, my Gatsby site works fine. However, if I change the image to a URL string of an existing image, my Gatsby page query breaks:


      Field "featureImage" must not have a selection since type "String" has no
subfields.

I suspect this is obviously because my graphQL query was set up to expect an image file, and I've changed that file to a string in the CMS. Is there a way to make this implementation dynamic? Here's the relevant code:

PAGE QUERY IN TEMPLATE COMPONENT

export const pageQuery = graphql`
  query IndexPageTemplate {
    markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        featureImage {
          childImageSharp {
            fluid(maxWidth: 2048, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
        instagram
        twitter
        facebook
        email
      }
    }
  }
`

GATSBY NODE FOR RELATIVE PATH IMAGES

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node) // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Ferran Buireu Ferran Buireu · Accepted Answer · 2021-05-05T05:03:46

There's a lack of details in the answer since it's a very general issue and needs debugging. My 2 cents:

Check the path of the filesystem in your gatsby-node.js: Gatsby needs to know where are those assets stored in your project in order to create the proper GraphQL nodes using its transformers and sharps. For example:
```
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `uploads`,
      path: `${__dirname}/static/assets/images`
    }
  },
```
Check the paths, naming, extensions of everything involved (images, folders, etc).
Check your media_folder and public_folder folder. They should look like:
```
  media_folder: static/assets/images
  public_folder: /assets/images
```
Notice the missing slash in media_folder at the beginning.
Check the plugin's order. All your filesystem needs to be set above the remark plugins.

Use gatsby-remark-relative-images-v2 to create relative paths for assets:

  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      // gatsby-remark-relative-images-v2 must
      // go before gatsby-remark-images
      {
        resolve: `gatsby-remark-relative-images-v2`,
      },
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 590,
        },
      },
    ],
  },

Gatsby and Netlify CMS Image Widget: Is it possible to use an image or a url string?

1 Answers