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;
|
|||
|
|
}
|
|||
|
|
```
|