Question

在Gatsby Netlify CMS starter kit的副本中，我制作了一个可重用的header.js组件（components/header.js），其中显示了我的网站徽标和导航。问题是我的徽标图像无法显示，出现错误TypeError: Cannot read property 'childImageSharp' of null，我认为这是错误地查询了图像路径。

我的logo.gif图像位于相同的components文件夹中，并且还将其添加到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
      }
    }
  }
}

`}

猜测我想要绝对路径，因为标头将位于后子文件夹中，但是没有对2个选项in the docs进行任何说明。无论如何，两者似乎都不起作用。任何指导，不胜感激，谢谢。

Answer 1

原来，这对于gifs无效，而对jpg和png无效。奇怪！

Gatsby中图像的GraphQL StaticQuery损坏

1 个答案: