Изучите Nuxt с коллекцией из 100+ советов!
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" />
Узнать больше о компоненте <NuxtImg>.