Just images and GatsbyImageSharpFluid_withWebp error

Question

I am trying to load in multiple images with gatsby and I have two issues.

Issue #1 My query is here:

export const query = graphql`
  query announcementsPage {
    allFile {       
      nodes {        
        relativePath         
        childImageSharp {         
          fluid(maxWidth: 1200) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
       }
      }
    }
  `

This returns back

Unknown fragment "GatsbyImageSharpFluid_withWebp"

I read in other threads that GatsbyImageSharpFluid_withWebp does not work in the graphiql testing in develop, but will work in the project. Mine is the opposite problem, it shows up fine in graphiql, but fails on localhost.

Issue #2 is that it loads in my markup files in with my images, because I am using gatsby-source-filesystem to also get markup and images like so:

{
resolve: `gatsby-source-filesystem`,
options: {
  name: 'content',
  path: `${__dirname}/src/content`
},

}, { resolve: gatsby-source-filesystem, options: { name: 'images', path: ${__dirname}/src/images/ }, }, { resolve: gatsby-source-filesystem, options: { name: 'sponsors', path: ${__dirname}/src/images/sponsors }, }

But gatsby says items will be undefined for the markup. I am not sure if this is part of the issue for #1, but I would like to be able to call to just images. Thanks in advance for your responses.

Just images and GatsbyImageSharpFluid_withWebp error

0 Answers0