Введение в картинки и шрифты в Nuxt

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

В Nuxt картинки и шрифты подключают разными способами, и от выбора зависит, как файл попадёт в сборку и какой адрес увидит пользователь в инструментах разработчика. Часть файлов кладут в каталог public: они отдаются как есть, по пути, который совпадает с именем в корне сайта. Другие ресурсы держат в app/assets: их обрабатывает сборка, и в готовом приложении адрес может отличаться от исходного имени файла.

Для шрифта удобно опираться на уже подключённый глобальный файл main.css из app/assets/css, который указан в nuxt.config.ts в массиве css. Туда же добавляют правило font-family для body или для классов шапки из макета по умолчанию, без установки отдельных модулей Nuxt.

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

Примеры опираются на знакомую структуру: страницы в app/pages, оболочка в app/layouts/default.vue, переходы через NuxtLink и общие стили из main.css. Так проще увидеть, как картинка или шрифт влияют на главную и на другие адреса при npm run dev и после npm run build.