Введение в компонент изображения в Next.js
Next.js - мой любимый интерфейсный фреймворк, потому что он имеет множество преимуществ по сравнению с базовым приложением React. Одним из таких преимуществ является встроенный компонент Image и автоматическая оптимизация изображений, которые они добавили в версии 10.
В этой статье мы рассмотрим компонент Image из Next.js и узнаем, как использовать его для оптимизации изображения с внешнего веб-сайта. В этом примере мы будем работать в create-next-app начальном проекте.
Если вы не знаете, что такое Next.js, ознакомьтесь со статьей ниже, чтобы начать работу. Затем вернитесь к этой статье, чтобы узнать о компоненте Image.
К концу этой статьи вы должны понять следующее:
- Что такое компонент изображения?
- Каковы преимущества использования компонента изображения?
- Как оптимизировать изображения, размещенные на внешних сайтах?
- Как использовать компонент Image в проекте?
- Как растянуть изображение, чтобы оно соответствовало родительскому элементу?
Компонент изображения
Компонент изображения из Next.js является расширением элемента HTML <img>. Мы можем использовать компонент Image, импортировав его из next/image.
import Image from 'next/image';
Преимущества
- Позволяет изменять размер, оптимизировать и обслуживать изображения в современных форматах, что позволяет избежать отправки больших изображений на устройства с меньшим окном просмотра.
- Позволяет Next.js автоматически принимать будущие форматы изображений и предоставлять их браузерам, поддерживающим эти форматы.
- Оптимизирует изображения по запросу, а не во время сборки, поэтому время сборки не увеличивается.
- По умолчанию изображения загружаются лениво, что означает, что на скорость страницы не влияют изображения за пределами области просмотра.
- Изображения отображаются таким образом, чтобы избежать кумулятивных сдвигов макета, что помогает улучшить рейтинг поиска в Google.
Настроить домены
Мы можем воспользоваться преимуществами оптимизации изображений в Next.js для изображений, которые также размещены на других веб-сайтах.
Для этого нам нужно добавить конфигурацию в next.config.js файл. Нам нужно указать, из каких доменов разрешено оптимизировать изображения.
В этом примере я хочу разрешить изображения с https://unsplash.com/. Итак, я добавлю images.unsplash.com в качестве обслуживаемого внешнего домена.
module.exports = {
images: {
domains: ['images.unsplash.com'],
},
}Требуемый реквизит
Теперь мы можем визуализировать наше изображение. Компонент Image принимает 4 необходимых свойства.
- src - чтобы получить источник любого изображения из Unsplash, просто щелкните изображение правой кнопкой мыши и выберите «Копировать адрес изображения».
- alt - значимый текст, описывающий изображение.
- width - ширина изображения в пикселях.
- height - высота изображения в пикселях.
<Image
src="https://images.unsplash.com/photo-1519861531473-9200262188bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80"
alt="basketball"
height={426}
width={640}
/>
Добавляя ширину и высоту изображения, убедитесь, что добавили правильные размеры изображения. Это важно!
Вы можете узнать размеры изображения в Unsplash, щелкнув стрелку в правом верхнем углу.
Если мы добавим ширину и высоту с другим соотношением сторон, изображение изменится соответствующим образом. Например, если мы изменим ширину и высоту этого изображения на квадрат размером 400 пикселей каждый, это приведет к следующему изображению.
<Image
src="https://images.unsplash.com/photo-1519861531473-9200262188bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80"
alt="basketball"
height={400}
width={400}
/>
Как видите, изображение сжато, чтобы соответствовать указанной нами ширине и высоте.
Ручки различных размеров
Бывают случаи, когда вы не знаете ширину и высоту изображения, но все же хотите, чтобы оно заполнило все пространство, сохраняя при этом соотношение сторон.
В этой ситуации вы можете не указывать ширину и высоту в компоненте Image. Вместо этого добавьте опору layout="fill". Это растянет изображение до ширины и высоты родительского элемента. При использовании опоры layout="fill" часто лучше сочетать ее с objectFit="cover". Это позволит изображению сохранить свое соотношение сторон при заполнении всего поля содержимого элемента.
Для этого оберните компонент Image как дочерний по отношению к элементу <div>. Затем добавьте ширину и высоту к родительскому элементу <div>, а также присвойте ему position="relative".
<div className={styles.image}>
<Image
src="https://images.unsplash.com/photo-1519861531473-9200262188bf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2102&q=80"
alt="basketball"
layout="fill"
objectFit="cover"
/>
</div>
// styles
.image {
height: 400px;
width: 400px;
position: relative;
}
Здесь мы видим, что изображение занимает желаемый квадрат размером 400 пикселей, но соотношение сторон изображения остается неизменным. Части изображения, которые не помещаются в родительский элемент, обрезаются.
Для более сложных случаев есть другие реквизиты, которые вы также можете добавить в компонент Image. Ознакомьтесь с полной документацией здесь.
Заключение
Спасибо за прочтение! Надеюсь, эта статья помогла вам начать работу с компонентом Image из Next.js. Подробнее об оптимизации изображений можно прочитать здесь.
Я настоятельно рекомендую использовать компонент Image вместо обычного тега <img>, если вы работаете над проектом Next.js. Реализовать его легко, и он дает так много преимуществ.
Если вы хотите узнать, как обрабатывать маршрутизацию в Next.js, ознакомьтесь со статьей ниже.