找不到gatsby图像svg

Question

尝试以这种方式加载SVG图像时：

export const query = graphql`
    query {
        fileName: file(relativePath: { eq: "logo_large.svg" }) {
            childImageSharp {
                fluid(maxWidth: 1060) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
            }
        }
    }
`

我懂了 TypeError: Cannot read property 'childImageSharp' of null

如果我尝试完全相同但使用.jpg或.png图像，则它可以工作，因此相对路径必须正确。我应该特别考虑SVG吗？

Answer 1

由于显而易见的原因，此插件不支持 SVG，它们是矢量的，并且无需像这样的插件即可自动调整其大小

Answer 2

“由于明显的原因，此插件不支持SVG，它们是矢量的，不需要像这样的插件就可以自动调整大小”

正确。我对字段的要求是所有三个或更多类型，例如png + jpg + svg，因此您必须使用gatsby-image动态地处理它，或者不使用。您可以通过在查询中添加extension和publicURL来解决此问题：

  ...
  image {
    childImageSharp {
      fluid(maxWidth: 500, quality: 92) {
        ...GatsbyImageSharpFluid
      }
    }
    extension
    publicURL
  }
  ...

然后，在PreviewCompatibleImage中，添加如下内容：

  // svg support
  if (!childImageSharp && extension === 'svg') {
    return <img style={imageStyle} src={publicURL} alt={alt} />
  }

感谢github上的andresmrm：https : //github.com/gatsbyjs/gatsby/issues/10297#issuecomment-464834529