时间戳

首页 > 解决方案 > 使用 gatsby-image 的 tracedSVG 作为实际图片

gatsby - 使用 gatsby-image 的 tracedSVG 作为实际图片

问题描述

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

长版：

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

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

在此处输入图像描述

我试过了

fluid 
{            
    tracedSVG  
}

代替

fluid
{
   ...GatsbyImageSharpFluid_tracedSVG
}

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

标签： gatsbygatsby-imagegatsby-plugingatsby-remark-image

解决方案

是否可以使用来自 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>
)

推荐阅读