Компонент картинки в Nuxt

Давайте познакомимся с компонентом NuxtImg, который модуль регистрирует глобально. Его можно ставить в шаблон там, где раньше использовали img: те же атрибуты src и alt, но дальше запрос к файлу идёт через обработчик @nuxt/image.

Для статики из public путь в src задаём от корня сайта со слэша в начале. Положим обложку в public/cover.jpg и выведем её на главной. Структура для примера:

/my-app/
- /public/
  - cover.jpg
- /app/
  - /pages/
    - index.vue

Разметка главной с компонентом NuxtImg:

<template>
	<NuxtImg src="/cover.jpg" alt="Cover" />
</template>

Строка /cover.jpg указывает на файл в public, как и у обычного img в основном учебнике. Импорт в script setup не нужен: модуль уже подключён в nuxt.config.ts. Подпись alt оставляем на английском для доступности.

После npm run dev обложка откроется по тому же URL, что и раньше, но последующие уроки покажут, как модуль меняет отдаваемый размер файла, когда это укажем в разметке.

Положите логотип в public и выведите его на главной через компонент модуля с английским alt.

Сделайте страницу каталога с фото товара из public, подключённым через компонент модуля.