使用 gatsby-image 追踪 SVG 作为实际图片

Question

TL;DR：是否可以使用来自 childImageSharp 的 Gatsby 渲染的 tracedSVG 作为您网站上的实际图片？

长版：

所以，我今天早些时候在一个小型网站上与 Gatsby 一起为我的演奏会工作，当我将它托管在我的机器上时，图片加载得很好，但是当我将项目部署到 Github Pages，图片文件加载失败，只加载了 tracedSVG 占位符。

现在我确信有一个解决方案；我还没有调查过。 问题是，我有点喜欢那些艺术风格的 tracedSVG 在我的网站上的外观，我想保留它们。当然，我可以保持原样，但如果有合适且更优雅的方法，我很想知道。

我试过了

fluid 
{            
    tracedSVG  
}

而不是

fluid
{
   ...GatsbyImageSharpFluid_tracedSVG
}

在js文件中，图片和占位符加载失败。

Answer 1

是否可以使用来自 childImageSharp 的 Gatsby 渲染的 tracedSVG 作为您网站上的实际图片？

简短的回答：是的，你可以。您的查询应如下所示：

export const query = graphql`
  query {
    file(relativePath: { eq: "/path/to/your/traced/svg/traced.svg" }) {
      childImageSharp {
        fluid(width: 125, height: 125) {
          ...GatsbyImageSharpFluid_tracedSVG        
        }
      }
    }
  }
`

然后，使用您的gatsby-image：

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fluid={data.file.childImageSharp.fluid} />
  </div>
)