Картинка из public в Nuxt

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

Положим обложку сайта в cover.jpg внутри public. Тогда по адресу /cover.jpg сервер отдаст этот файл и в режиме разработки, и на собранном сайте. Структура для примера:

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

На главной выведем картинку обычным тегом img. В src укажем путь от корня сайта, начиная со слэша. Атрибут alt задаём на английском: он описывает изображение, если файл не загрузился, и помогает доступности. Путь /cover.jpg не связан с папкой app в URL: для браузера это просто файл из public. Такой способ удобен для favicon, логотипа с постоянной ссылкой и любых картинок, которые должны открываться по одному и тому же имени до и после npm run build. Импорт из script setup здесь не нужен: достаточно строки в src. Разметка для обложки:

<template>
	<img src="/cover.jpg" alt="Site cover">
</template>

Положите файл логотипа в public и выведите его на главной странице по прямому URL.