GraphQL StaticQuery of an image in Gatsby broken

Question

In my copy of Gatsby Netlify CMS starter kit I've made a reusable header.js component ( components/header.js ) which shows my site logo and nav. Problem is my logo image won't show up, with error TypeError: Cannot read property 'childImageSharp' of null which I interpret to mean I'm querying the image path incorrectly.

I have my logo.gif image in the same components folder, and I also added it to content/assets . My static query, which I gather is specifically for querying in components, looks like this:

<StaticQuery
      query={graphql`
        query LogoQuery {
          logo: file(absolutePath: { regex: "logo.gif" }) {
            childImageSharp {
              fixed(width: 500, height: 350) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      `}
      render={data => (
    ....
    <Img fixed={data.logo.childImageSharp.fixed} alt="Home" />
    ....

I also tried relativePath, to no avail:

query LogoQuery {
  logo: file(relativePath: { eq: "assets/logo.gif" }) {
    childImageSharp {
      fixed(width: 500, height: 350) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}

`}

Guessing I want absolute path since header will be in post subfolders, doesn't say anything about the 2 options in the docs though. Regardless, neither seem to work. Any guidance greatly appreciated, thanks.

Answer 1

ha it turns out that this just doesn't work for gifs... only jpgs and pngs. Strange!