Импорт картинки в Vite

Импорт картинки из модуля даёт адрес, который сборка подставляет сама.

Пусть на странице по-прежнему выводится слово hello, а рядом появится картинка. Файл положим в src и подключим строкой import в src/main.js. Для svg достаточно простого рисунка с текстом:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32">
  <text x="4" y="22" font-size="18">hello</text>
</svg>

Импорт без фигурных скобок вернёт строку с адресом файла. Создадим элемент img и подставим этот адрес в атрибут src:

import logoUrl from './logo.svg';

document.body.textContent = 'hello';

const img = document.createElement('img');
img.src = logoUrl;
img.alt = 'logo';
document.body.append(img);

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

Создайте src/badge.svg с текстом note, импортируйте его из src/main.js и выведите картинку через img рядом со словом hello.

Выполните сборку проекта и найдите в dist/assets файл svg с хешем в имени, который соответствует src/badge.svg.