Картинка в странице в Vite

Картинка в странице стоит в src тега img, и Vite переписывает этот адрес при сборке.

Разметку можно описать прямо в index.html, не создавая элемент из JavaScript. Файл рисунка положим в src и укажем относительный путь в атрибуте src:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32">
  <circle cx="16" cy="16" r="12" fill="#3498db"/>
  <text x="28" y="20" font-size="14">hello</text>
</svg>

На странице выведем картинку и подключим модуль со словом hello:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello</title>
  </head>
  <body>
    <img src="./src/icon.svg" alt="icon" />
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Текст по-прежнему зададим в точке входа:

document.body.append(document.createTextNode('hello'));

На сервере разработки страница покажет svg и текст под картинкой. При сборке Vite обработает index.html, найдёт файл по src и подставит адрес из dist/assets в собранной копии страницы. Выполним сборку и откроем dist/index.html, чтобы сравнить атрибут src с исходником.

Добавьте src/emblem.svg, укажите его в img в index.html относительным src и выведите слово hello из src/main.js.

Соберите проект и сравните значение src у img в dist/index.html с путём ./src/emblem.svg в исходном index.html.