Question

我已经阅读了gatsby-image文档，但无法弄清楚如何将其关闭。默认情况下，看来gatsby-image会加载图像的缩略图，然后逐步加载图像。基本上是一个不错的占位符效果。但是我发现每次更改页面时徽标都会变得越来越模糊。这是我的代码：

 <StaticQuery
            query={graphql`
              query {
                file(relativePath: { eq: "appendto_logo.png" }) {
                  childImageSharp {
                    # Specify the image processing specifications right in the query.
                    # Makes it trivial to update as your page's design changes.
                    fixed(width: 150) {
                      ...GatsbyImageSharpFixed
                    }
                  }
                }
              }
            `}
            render={data => <Img fixed={data.file.childImageSharp.fixed} />}
          />

有什么想法吗？如何防止模糊效果？或缩略图加载效果...

Answer 1

为避免模糊效果，您可以使用placeholderStyle属性隐藏占位符：

<Img fixed={data.logoImage.childImageSharp.fixed} placeholderStyle={{ visibility: "hidden" }}/>

Answer 2

我认为您可以将critical道具传递给Gatsby Image，如下所示：<Img critical fixed={ ... }>它总是会立即加载图像。您可能还要在其中添加fadeIn：

标记为严重的图像将在解析DOM时立即开始加载，但是除非将fadIn设置为false，否则从占位符到最终图像的转换只有在安装组件之后才会发生。

Gatsby Image docs

Answer 3

切换到GatsbyImageSharpFixed_noBase64可以解决问题（而不仅仅是...GatsbyImageSharpFixed）

如何防止Gatsby图片在每次重新加载时模糊徽标？

3 个答案: