如何防止盖茨比图像在每次重新加载时模糊徽标？答案

【问题标题】：How to prevent Gatsby image from blurring a logo with every reload?如何防止盖茨比图像在每次重新加载时模糊徽标？
【发布时间】：2019-04-24 23:47:09
【问题描述】：

我已通读 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} />}
          />

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

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

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

【讨论】：

【解决方案2】：

更新

critical 现在已弃用，取而代之的是 loading：

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

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

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

原答案

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

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

Gatsby Image docs

【讨论】：

嗯……那个没有骰子……想知道它可能是什么其他属性。
critical 帮助我消除了模糊效果——唯一的例外是徽标首次加载时，但在此之后导航到所有其他页面并没有显示模糊动画。仅供参考：道具critical 现在已弃用，取而代之的是loading={eager}。但是，docs 建议使用末尾带有_noBase64 的片段

【解决方案3】：

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

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

【讨论】：