<NuxtPicture>

Исходный код
Компонент <NuxtPicture> автоматически оптимизирует изображения и подбирает современные форматы при подключённом модуле Nuxt Image.

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

Использование <NuxtPicture> почти совпадает с <NuxtImg>, но при возможности подключает современные форматы, например webp.

О теге <picture> см. документацию MDN.

Перед использованием установите и подключите модуль Nuxt Image:

Terminal
npx nuxt module add image

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

Передавайте те же параметры, что и для <NuxtImg>: компонент сформирует разметку <picture> и при поддержке провайдера добавит варианты в современных форматах.

Подробнее о компоненте <NuxtPicture>.