Картинка в стилях в Vite

Картинка в стилях записывается относительным адресом в url, и сборка находит файл.

Фон страницы можно задать свойством background-image в файле стилей. Путь в url пишут относительно файла CSS, а не от корня сайта. Рядом с src/style.css положим рисунок:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 32">
  <rect width="96" height="32" fill="#ecf0f1"/>
  <text x="8" y="22" font-size="16">hello</text>
</svg>

В правилах укажем фон и оставим место под текст hello:

body {
  min-height: 100vh;
  background-image: url('./pattern.svg');
  background-repeat: no-repeat;
  background-position: top right;
  padding: 1rem;
}

Подключим стили и текст в главном модуле:

import './style.css';

document.body.textContent = 'hello';

Откроем http://localhost:5173 при работающем сервере разработки. Картинка появится в углу страницы. После команды npm с подкомандой run и именем build файл svg попадёт в dist/assets, а в собранном CSS адрес в url уже будет указывать на этот итоговый файл.

Создайте src/wave.svg и задайте для body фон через url('./wave.svg') в src/style.css, подключённом из src/main.js, со словом hello на странице.

Соберите проект и откройте CSS файл в dist/assets, найдите в нём url с адресом скопированного src/wave.svg.