Почему gatsby-image так хорош и почему вы должны его использовать

Недавно я создал новый сайт, похожий на сайт в стиле блога (больше новостной сайт), и, конечно, использую Gatsby, а затем переключаю свою CMS на более популярную Contentful. Мне удалось легко настроить весь контент и вытащить его во внешний интерфейс, но мой сайт плохо справлялся с аудитом Lighthouse, потому что все мои изображения динамически загружались в <img src={}/>.

Это привело к тому, что страница при загрузке заикалась при загрузке всех изображений, и она казалась нестабильной. Я всегда видел gatsby-image, но, честно говоря, я никогда не мог передать то, что было дано мне в gatsby-starter, и использовал его только для локальных файлов изображений, таких как логотипы или любое изображение, сохраненное непосредственно в моей кодовой базе.

Но позвольте мне показать вам мою борьбу за использование gatsby-image с динамически загружаемыми изображениями из CMS и насколько это действительно просто.

Мой старый запрос GraphQl

allContentfulBlog(sort: { fields: [date], order: DESC }) {
   edges {
      node {
         title
         coverImage {
            fluid(maxWidth: 980) {
               ...GatsbyContentfulFluid
            }
         }
      }
   }
}

coverImage - это изображение, которое я захватываю, и оно просто ссылается на URL-адрес файла. Как я уже сказал, это приводило к снижению производительности и не использовало функцию отложенной загрузки gatsby-image.

Добавление gatsby-image

Во-первых, убедитесь, что в вашем проекте установлен gatsby-image (он должен быть у большинства стартеров gatsby).

Если не npm i gatsby-image.

Затем просто на странице, на которой вы визуализируете элементы изображения…

import Img from "gatsby-image" Измените свой запрос на использование gatsby-image

Contentful - одна из немногих CMS, которую gatsby-image поддерживает напрямую, так что это очень безболезненно. Вместо использования file { url } мы будем использовать fluid { ...GatsbyContentfulFluid }

allContentfulBlog(sort: { fields: [date], order: DESC }) 
   { edges 
      { node 
         { title 
           slug 
           date(formatString: "MMMM Do, YYYY") 
           coverImage { fluid(maxWidth: 980{
              ...GatsbyContentfulFluid
           } 
           title 
          } 
       } 
    } 
}

Тег жидкости предназначен для изображений, которые плавно переходят в свои контейнеры. Вы также можете использовать фиксированные и ряд других, которые можно найти в docs gatsby-image.

Наконец, с помощью этого запроса вы можете отобразить результаты и добавить их к импортированному нами <Img /> компоненту. Это будет выглядеть примерно так.

{allContentfulBlog.edges[0].node.tags.map(tag => ( 
   <Img 
      fluid={allContentfulBlog.edges[0].node.coverImage.fluid} 
      key={allContentfulBlog.edges[0].node.coverImage.fluid.src}
      alt={allContentfulBlog.edges[0].node.coverImage.title}
   </Img> 
))
}

Это необходимые реквизиты для компонента, key={}, fluid={}, alt={}

Как только все они будут заполнены, ваши изображения будут загружены с помощью gatsby-image! и это имеет такое большое значение, что я в процессе изменения всех своих изображений, чтобы использовать это, потому что разница в производительности серьезно безумна.

Первоначально опубликовано на https://www.settletom.com 11 июля 2020 г.