找不到盖茨比图像 svg

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

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

I get TypeError: Cannot read property 'childImageSharp' of null

如果我尝试完全相同的操作，但使用 .jpg 或 .png 图像，它会起作用，因此相对路径必须正确。 对于 SVG 有什么我应该特别考虑的吗？

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

正确的。如果你想处理多种类型，比如 png + jpg + svg，你必须使用 gatsby-image 动态处理它。您可以通过在 GraphQL 查询中添加扩展名和 publicURL 来解决此问题：

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

将其添加到您的图像组件中：

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

信用去往安德烈斯姆 https://github.com/gatsbyjs/gatsby/issues/10297#issuecomment-464834529在 GitHub 上。