Блог

Главная - Вопросы по программированию - Как предотвратить размывание логотипа Gatsby image при каждой перезагрузке?

Как предотвратить размывание логотипа Gatsby image при каждой перезагрузке?

#reactjs #gatsby

#reactjs #gatsby

Вопрос:

Я прочитал документы 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} />}
          />

Есть мысли? Как предотвратить этот эффект размытия? Или эффект загрузки миниатюр…

Ответ №1:

Переключение на GatsbyImageSharpFixed_noBase64 решило проблему (вместо просто ...GatsbyImageSharpFixed )

Ответ №2:

Обновить

critical теперь не рекомендуется в пользу loading :

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

Также используйте _noBase64 четкие фрагменты, чтобы полностью удалить эффект размытия, как было предложено в комментарии @ epsilon42 и ответе Кайла.

И, наконец, чтобы сохранить компонент (панель навигации и т.д.) При загрузке страницы, вы можете обернуть страницы в макет с помощью этого компонента.

Оригинальный ответ

Я думаю, вы можете передать critical реквизит к изображению Гэтсби, вот так: <Img critical fixed={ ... }> Это всегда будет загружать изображение немедленно. Возможно, вы захотите добавить fadeIn туда же:

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

Документы Gatsby Image docs

Комментарии:

1. Hmmm…No игральная кость на этом … интересно, какой еще атрибут это может быть.

2. critical у меня получилось убрать эффект размытия — единственное исключение из этого было при первой загрузке логотипа, но при переходе на все остальные страницы после этого анимация размытия не отображалась. К вашему сведению: prop critical теперь устарел в пользу loading={ eager } . Однако в документах рекомендуется использовать фрагмент с _noBase64 в конце

Ответ №3:

Чтобы избежать эффекта размытия, вы могли бы просто скрыть заполнитель, используя placeholderStyle атрибут:

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