Почему 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 г.