Введение в картинки в Nuxt

В основном учебнике вы уже выводили файлы через тег img: обложку из public по пути со слэша и снимок из assets через импорт в script setup. Браузер в обоих случаях запрашивает тот файл, который лежит на диске или попал в сборку: если исходник тяжёлый, пользователь скачивает его целиком, даже когда на экране картинка показывается в небольшом блоке.

На мобильном интернете и на страницах с десятками превью это заметно по времени загрузки и трафику. Отдельно можно править файлы в графическом редакторе, но тогда для каждого размера нужна своя копия, а вёрстка при смене макета снова расходится с реальными пикселями на экране.

Высший учебник подключает модуль @nuxt/image. Он встраивается в Nuxt как официальное расширение и даёт компонент для шаблона, который ведёт себя как привычный тег изображения, но просит сервис модуля отдать версию файла ближе к запрошенной ширине и высоте. Локальные файлы из public и удалённые адреса обрабатываются по одной схеме: в разметке указываем источник и параметры, а тяжёлую работу по изменению размера берёт на себя модуль.

Раздел опирается на JavaScript и структуру Nuxt 4: страницы в app/pages, корень приложения app/app.vue, настройки в nuxt.config.ts. Примеры можно повторить в проекте my-app после npm create nuxt@latest. Мы не возвращаемся к импорту из assets и не дублируем уроки про обычный img: здесь один согласованный способ работы с изображениями через модуль. Отдельный компонент для тега picture в этой теме не разбираем.

Каждый следующий шаг опирается на установку модуля, но урок можно читать с готовым конфигом и повторять только разметку на своей странице. Задача раздела - научиться подключать @nuxt/image, выводить локальные и внешние файлы, задавать размер и подбирать вариант под ширину viewport, чтобы браузер не тянул лишние мегабайты без необходимости.