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

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

切换到GatsbyImageSharpFixed_noBase64解决它（而不是仅仅 ...GatsbyImageSharpFixed）

Answer 2

更新

critical现在不赞成使用loading：

 - <Img critical fixed={ ... } />
 + <Img loading="eager" fixed={ ... } />

_noBase64正如@epsilon42 的评论和凯尔的回答所建议的那样，还可以使用锐利的片段来完全消除模糊效果。

最后，要在页面加载之间保留一个组件（导航栏等），您可以将页面包装在具有该组件的布局中。

原答案

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

标记为关键的图像将在解析 DOM 时立即开始加载，但除非将淡入淡出设置为 false，否则在安装组件之前不会发生从占位符到最终图像的转换。

盖茨比图像文档