S.Gromov
f2358da397
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
96 lines
2.9 KiB
Markdown
96 lines
2.9 KiB
Markdown
---
|
||
title: Изображения
|
||
description: Как подключать изображения через Next.js Image в проекте.
|
||
---
|
||
|
||
# Изображения
|
||
|
||
Как подключать изображения через Next.js Image в проекте.
|
||
|
||
## Назначение
|
||
|
||
Изображения рендерятся через компонент `Image` из `next/image`. Это сохраняет единый API для размеров, `alt`, lazy-loading и `priority`, даже если оптимизация изображений отключена.
|
||
|
||
В проекте оптимизация Next.js Image отключается через `unoptimized`, чтобы сборка и рантайм не зависели от встроенного image optimizer.
|
||
|
||
## Настройка
|
||
|
||
Отключение оптимизации задаётся глобально в `next.config.ts`:
|
||
|
||
```ts
|
||
import type { NextConfig } from 'next'
|
||
|
||
const nextConfig: NextConfig = {
|
||
images: {
|
||
unoptimized: true,
|
||
},
|
||
}
|
||
|
||
export default nextConfig
|
||
```
|
||
|
||
После этого `unoptimized` не нужно повторять на каждом `Image`.
|
||
|
||
## Использование
|
||
|
||
Статические изображения, доступные по URL, размещаются в `public/`:
|
||
|
||
```text
|
||
public/
|
||
└── images/
|
||
└── user-avatar.png
|
||
```
|
||
|
||
```tsx
|
||
import Image from 'next/image'
|
||
|
||
export const UserAvatar = () => {
|
||
return (
|
||
<Image
|
||
src="/images/user-avatar.png"
|
||
alt="Аватар пользователя"
|
||
width={96}
|
||
height={96}
|
||
/>
|
||
)
|
||
}
|
||
```
|
||
|
||
## Правила
|
||
|
||
- Использовать `Image` из `next/image`, не обычный `<img>`.
|
||
- Для контентных изображений всегда писать осмысленный `alt`.
|
||
- Для декоративных изображений использовать `alt=""`.
|
||
- Указывать `width` и `height`, если изображение не использует `fill`.
|
||
- При `fill` задавать `sizes` и контролировать размеры родителя стилями.
|
||
- `priority` ставить только для изображений первого экрана.
|
||
- SVG-иконки не оформлять как изображения — для них используется раздел [SVG-спрайты](./svg-sprites/svg-sprites-intro.md).
|
||
|
||
## Пример с `fill`
|
||
|
||
```tsx
|
||
import Image from 'next/image'
|
||
import styles from '../styles/article-card-cover.module.css'
|
||
|
||
export const ArticleCardCover = () => {
|
||
return (
|
||
<div className={styles.root}>
|
||
<Image
|
||
src="/images/article-cover.jpg"
|
||
alt="Обложка статьи"
|
||
fill
|
||
sizes="(min-width: 768px) 33vw, 100vw"
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
```css
|
||
.root {
|
||
position: relative;
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
}
|
||
```
|