Как предотвратить размывание логотипа на изображении Гэтсби при каждой перезагрузке?

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 реквизит Gatsby Image, например так: <Img critical fixed={ ... }> Он всегда будет загружать изображение немедленно. Вы также можете добавить туда fadeIn:

Изображения, помеченные как критические, начнут загружаться сразу после анализа DOM, но если для fadeIn не установлено значение false, переход от заполнителя к конечному изображению не будет происходить до тех пор, пока компонент не будет смонтирован.

Документы с изображением Гэтсби