Фото від Soragrit Wongsa на Unsplash
Шпаргалка для розробників
Вже набридло постійно забувати, як стилізувати та налаштовувати компонент Image в Next.js у вашому макеті? Ширина на всю, підлаштовування під висоту батьківського контейнера, фіксована висота та ширина… це може збивати з пантелику.
Ось підсумок найпоширеніших випадків використання, з акцентом на практичну сторону, що дозволить розробникам витрачати менше часу на налаштування зображень і більше часу на створення чудового вебсайту.
1. Фіксована ширина та висота
Добре, почнемо з простого. Простий випадок: два зображення 300x300 поруч:
Дуже красиво та просто. Ви можете використовувати це, наприклад, коли в секції кілька зображень з фіксованими розмірами вирівняні поруч. Додайте ефекти при наведенні, накладіть текст, зменшіть непрозорість і отримайте ось таке: (Зараз саме час сказати, що я використовую Tailwind CSS у всіх моїх прикладах)
TRAVEL
HIGH
Тепер ви знаєте, як швидко отримати це на своєму вебсайті за допомогою наведеного фрагмента коду.
2. Динамічний розмір зображення
Коли width і height невідомі. Ми можемо використовувати fill —
Це вимагає, щоб батьківський елемент мав position, встановлений на relative, fixed або absolute, проте І батьківський компонент повинен мати задані width та height, оскільки з fill — зображення просто заповнює батьківський елемент.
Приклад роботи:
АЛЕ, якщо нам потрібно два зображення поруч, кожне з них повинно мати батьківський елемент з встановленим position, width та height. Інакше вони будуть накладатися одне на одне, і видно буде лише одне, тому що fill автоматично встановлює позицію зображення на absolute:
3. Статичний імпорт зображення
Ще один спосіб не вказувати width і height — це статичний імпорт зображення. Це схоже на попередній фрагмент коду, але без атрибута fill
import Image from "next/image";
import Car from "../public/car.jpg";
import Plane from "../public/plane.jpg";
export default async function Home() {
return (
);
}
4.
Blur placeholder
Якщо ми використовуємо статичний імпорт, як у попередньому прикладі, нам потрібен лише один атрибут для цього ефекту: placeholder="blur"
import Image from "next/image";
import Car from "../public/car.jpg";
import Plane from "../public/plane.jpg";
export default async function Home() {
return (
);
}
Якщо ми не використовуємо статичний імпорт, потрібно вказати blurDataURL:
import Image from "next/image";
export default async function Home() {
return (
);
}
Це також працюватиме зі статичним експортом! Однак потрібно налаштувати зображення як не оптимізовані в конфігурації Next.js. Це означає, що наш сайт не використовуватиме оптимізацію зображень, яку надає Next.js, але ефект розмиття все одно буде видно. Ми все ще можемо оптимізувати зображення за допомогою статичного експорту Next.js, але це вже тема для іншої статті! Ось конфігурація:
const nextConfig: NextConfig = {
output: "export",
images: {
unoptimized: true,
},
};
Висновок
Компонент Image в Next.js може бути дуже потужним і виконувати багато функцій з мінімальними налаштуваннями. Освоївши його основи та зрозумівши поширені випадки використання, розробники можуть оптимізувати свій робочий процес і писати код швидше. Я сам потребував часу, щоб почати використовувати його без проблем у своїх проєктах, тому продовжуйте експериментувати і створювати — ваші користувачі будуть вам вдячні!
Перекладено з: Mastering the Next.js Image Component: The Basics