<NuxtImg>
Nuxt предоставляет компонент <NuxtImg> для автоматической оптимизации изображений.
<NuxtImg>
- это прямая замена нативного тега<img>
.
- Использует встроенный провайдер для оптимизации локальных и удаленных изображений
- Преобразует
src
в URL-адреса, оптимизированные для провайдера - Автоматически изменяет размер изображений в зависимости от
width
иheight
- Генерирует адаптивные размеры при указании параметра
sizes
- Поддерживает нативную отложенную загрузку, а также другие атрибуты
<img>
Настройка
Чтобы использовать <NuxtImg>
, вам необходимо установить и включить модуль Nuxt Image:
Terminal
npx nuxi@latest module add image
Использование
<NuxtImg>
выводит нативный тег img
напрямую (без какой-либо обертки вокруг него). Используйте его так же, как если бы вы использовали тег <img>
:
<NuxtImg src="/nuxt-icon.png" />
В результате:
<img src="/nuxt-icon.png" />