Возможно, вы уже несколько раз делали изображение героя, но делали ли вы его в Next.js? Если вы этого не делали, то, возможно, попробовав, вы столкнетесь с трудностями. Здесь я расскажу вам, как это сделать, и предупрежу о возможных трудностях.
В этой статье
- Компонент изображений Next.js
- Неудачные попытки создать изображение героя с помощью Next.js
- Как создать изображение героя с помощью Next.js
- Объяснение решения
- Резюме
Брюс, Халк приближается
Компонент изображений Next.js
Next.js предоставляет действительно мощный компонент Image, который вы обязательно должны использовать, если у вас нет причин не делать этого. Он выполняет несколько действий за вас, некоторые из которых включены по умолчанию, а некоторые вы должны указать сами. Вот некоторые примеры того, что может делать компонент Image:
- Автоматически изменять размеры изображений. Нет необходимости вручную генерировать изображения разных размеров для использования в элементе изображения с srcset. Поддерживает несколько типов макетов. К сожалению, из документации не очень легко понять, когда какой макет использовать.
- Ленивая загрузка изображений. Изображения загружаются в первую очередь, когда они закрыты для прокрутки. Если вам нужно отказаться от такого поведения, вы можете указать свойство prioritize.
- Позволяет оптимизировать размеры и качество изображений различными способами.
- Позволяет размывать изображения, предоставляя временное размытие-изображение. Если вам нужен одноцветный размытый фон, вы можете сгенерировать его в кодировке base64 здесь.
<Image
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkso6pBwACGgEie2Im0gAAAABJRU5ErkJggg=="
placeholder="blur"s
src={memeUrl}
layout="fill"
alt="Programming meme"
/>
Передайте изображение в кодировке base64 в blurDataURL, чтобы использовать его в качестве заполнителя размытого фона.
Чтобы увидеть размытые изображения в действии, перейдите на страницу мемов на моем сайте и прокрутите вниз. Next.js автоматически обрабатывает размытие и ленивую загрузку.
Неудачные попытки создать изображение героя с помощью Next.js
Попытка создать изображение героя с помощью Next.js может оказаться непростым процессом. Как я уже говорил выше, если у вас нет причин не делать этого, вы должны использовать встроенный компонент Next.js Image.
При первой попытке создать изображение героя вы можете подумать, что можно установить ширину компонента Image равной 100%. К сожалению, это невозможно с удаленными изображениями, Next.js этого не поддерживает. В итоге вы получите изображение шириной 100px.
Второй попыткой может быть не указывать ширину для компонента Image в надежде, что он заполнит родительский элемент. Это приведет к ошибке Unhandled Runtime Error.
"Error: Image with src SOURCE must use "width" and "height" properties or "layout='fill'" property."
Компонент Next.js Image требует ширину и высоту, или макет заполнения
Ошибка, которую выдает Next.js, вполне понятна. От вас требуется задать ширину и высоту компонента Image, если вы не указали значение fill в свойстве layout. Вы делаете именно то, что предлагает Next.js, поскольку вы законопослушный гражданин, а может быть, потому что у вас нет других идей.
Использование свойства layout устраняет ошибку, но ваше изображение героя теперь заполняет весь область просмотра, а не div, который его обертывает. Отлично… Вы начинаете понимать, что сегодня вы опоздаете на званый ужин к бабушке.
Будучи довольно опытным взломщиком CSS, вы немного повозитесь с инспектором элементов в браузере. У вас ничего не получается, ни Stack Overflow, ни документация Next.js не помогают, и вы не находите учебника по этому вопросу. Может быть, лучше использовать собственный элемент изображения, а не компонент Image, который предоставляет Next.js?
Приношу извинения всем веганам, для вас еды не будет. И за острую шутку, я знаю, что это не кролик, …
Как создать изображение героя с помощью Next.js
Я рад сообщить, что есть простой способ исправить это. Ключом к успеху является использование position: relative на родительском элементе. Я бы предложил сделать четыре вещи.
- Добавить элемент-обертку героя с position: relative и соответствующими шириной и высотой.
- Добавьте компонент Next.js Image со свойством layout, установленным на fill.
- Заверните компонент Image в div с z-index: -1.
- Добавьте любое содержимое героя, которое вы хотите, в относительно позиционированный div в обертке героя. Поместите содержимое героя в этот div.
Полное решение будет выглядеть следующим образом.
// Header component.
import Image from "next/image";
import styles from "../header.module.css";
const { heroContent, heroWrapper, imageWrapper } = styles;
const IMAGE_URL =
"https://www.perssondennis.com/images/articles/how-to-make-a-hero-image-in-nextjs/perfect-avocado.webp";
export default () => {
return (
<div className={heroWrapper}>
<div className={imageWrapper}>
<Image
priority
src={IMAGE_URL}
layout="fill"
objectFit="cover"
objectPosition="center"
alt="hero image example"
/>
</div>
<div className={heroContent}>
<h1>Hero Image</h1>
<p>Next.js hero image example.</p>
</div>
</div>
);
};
// header.module.css
// step 1.
.heroWrapper {
position: relative;
width: 100vw;
height: 50vh;
}
// step 3.
.imageWrapper {
z-index: -1;
}
// step 4.
.heroContent {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
Вот как это будет выглядеть при использовании изображения героя на странице
Решение объяснено
Итак, что мы сделали? На шаге 1. мы добавили относительную позицию к обертке героя. В этом секрет успеха в данном случае. Next.js установит абсолютную позицию для своего изображения, когда вы зададите свойству layout значение fill в шаге 2.
// step 1.
.heroWrapper {
position: relative;
width: 100vw;
height: 50vh;
}
<div className="{imageWrapper}">
<image
priority
src="{IMAGE_URL}"
layout="fill"
objectFit="cover"
objectPosition="center"
alt="hero image example"
/>
</div>
В CSS абсолютно позиционированные элементы являются абсолютными относительно своего ближайшего родителя, который явно позиционирован. Если установить положение обертки героя относительным, то абсолютно позиционированное изображение внутри нее вырастет настолько, насколько увеличится обертка героя.
Обертка героя, в свою очередь, будет такого же размера, как и содержимое, которое вы добавите в нее на шаге 4. Обратите внимание, что ширина и высота изображения героя не влияет на ширину и высоту обертки героя, поскольку изображение имеет абсолютную позицию.
Если убрать относительную позицию из обертки героя, то изображение вырастет до размеров области просмотра, поскольку ни у родителя, ни у прародителя не задана позиция.
В шаге 3. мы обернули изображение героя в div (imageWrapper) с z-index, установленным на -1, а в шаге 4 мы добавили div с относительной позицией (heroContent) в качестве дочернего элемента к обертке изображения. Это необходимо для того, чтобы другие компоненты отображались поверх изображения героя.
// step 3.
.imageWrapper {
z-index: -1;
}
// step 4.
.heroContent {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
Теперь у нас есть все необходимое для реализации изображения героя с помощью компонента Next.js Image. Вы можете заполнить его любым содержимым, лично я предпочитаю центрированное содержимое, что легче всего сделать с помощью flex column и центрированного свойства align-items!
Резюме
- Всегда используйте компонент Next.js Image, если у вас нет причин не делать этого.
- Если вы хотите создать изображение героя с помощью компонента Next.js image, оберните изображение героя и его содержимое в относительно позиционированный div и задайте свойству layout изображения значение fill.
- Заверните изображение героя в div с z-индексом -1, чтобы оно отображалось под содержимым раздела героя.
- Создайте div под оберткой изображения и задайте ему относительное положение.
Деннис Перссон