1

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

长版:

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

现在我确信有一个解决方案;我还没有调查过。问题是,我有点喜欢那些充满艺术气息的tracedSVG在我的网站上的样子,我想保留它们。当然,我可以保持原样,但是如果有一种适当且更优雅的方式来做到这一点,我很想知道。

在此处输入图像描述

我试过了

fluid 
{            
    tracedSVG  
}

代替

fluid
{
   ...GatsbyImageSharpFluid_tracedSVG
}

在 js 文件中,图像和占位符无法加载。

4

1 回答 1

0

是否可以使用来自 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>
)
于 2021-01-12T13:39:58.223 回答