<NuxtImg>

Исходный код
Nuxt предоставляет компонент `<NuxtImg>` для автоматической оптимизации изображений.

<NuxtImg> — прямая замена нативного тега <img>.

  • использует встроенный провайдер для оптимизации локальных и удалённых изображений;
  • преобразует src в URL, оптимизированные провайдером;
  • автоматически подбирает размер по width и height;
  • при указании sizes формирует набор вариантов для адаптивной вёрстки;
  • поддерживает нативную отложенную загрузку и остальные атрибуты <img>.

Настройка

Чтобы использовать <NuxtImg>, установите и подключите модуль Nuxt Image:

Terminal
npx nuxt module add image

Использование

<NuxtImg> выводит нативный тег img без обёртки. Применяйте его так же, как обычный <img>:

<NuxtImg src="/nuxt-icon.png" />

В результате:

<img src="/nuxt-icon.png" />
Подробнее о компоненте <NuxtImg>.