Gatsby 中图像的 GraphQL StaticQuery 损坏

Question

在我的 Gatsby Netlify CMS starter kit 副本中，我制作了一个可重用的 header.js 组件 (components/header.js)，它显示了我的网站徽标和导航。问题是我的徽标图像不会显示，错误 TypeError: Cannot read property 'childImageSharp' of null 我解释为我正在错误地查询图像路径。

我的 logo.gif 图像在同一个组件文件夹中，我还将它添加到 content/assets。我收集的静态查询专门用于查询组件，如下所示：

<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" />
    ....

我也试过relativePath，没用：

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

`}

猜测我想要绝对路径，因为标题将在 post 子文件夹中，但没有说明 in the docs 的 2 个选项。无论如何，两者似乎都不起作用。非常感谢任何指导，谢谢。

Answer 1

ha 事实证明，这只是不适用于 gif... 仅适用于 jpg 和 png。奇怪！