Импорт изображений, шрифтов, медиафайлов

Vite рассматривает любые статические ресурсы как часть графа модулей. Это означает, что изображения не копируются вручную и не требуют отдельной настройки сборщика — достаточно импортировать файл напрямую в код.

Прямой импорт изображения

Наиболее распространённый способ работы с изображениями:

import logo from './assets/logo.png';

document.querySelector('#app').innerHTML = `
  <img src="${logo}" alt="Logo">
`;

При таком импорте Vite:

  • анализирует файл как зависимость модуля;
  • перемещает его в output директорию сборки;
  • переименовывает с добавлением хеша для кэширования;
  • возвращает итоговый URL как строку.

Ключевая особенность заключается в том, что импорт изображения — это не загрузка файла в рантайме, а получение ссылки на оптимизированный ресурс после сборки.

Использование URL через new URL

В ESM-окружении Vite поддерживает стандартный механизм:

const imgUrl = new URL('./assets/logo.png', import.meta.url).href;

const img = document.createElement('img');
img.src = imgUrl;

document.body.appendChild(img);

Такой подход полезен при динамическом формировании путей или работе без прямого import.

Параметры загрузки ресурсов

Vite позволяет управлять способом обработки файлов через query-параметры:

?url

Принудительно возвращает URL файла:

import imgUrl from './assets/photo.jpg?url';

Используется, когда важно явно указать, что нужен путь, а не инлайн-контент.

?inline

Файл преобразуется в base64 и встраивается прямо в бандл:

import icon from './assets/icon.svg?inline';

Подходит для маленьких изображений, где HTTP-запрос нежелателен.

?raw

Импортирует содержимое файла как строку:

import svgText from './assets/icon.svg?raw';

Часто применяется для:

  • SVG-спрайтов;
  • шаблонов;
  • текстовых ресурсов.

Публичная директория (public)

Файлы, размещённые в папке public, не проходят через систему модулей Vite.

public/
  images/
    banner.jpg

Доступ к таким ресурсам осуществляется напрямую:

<img src="/images/banner.jpg">

Особенности:

  • файлы не хешируются;
  • не обрабатываются сборщиком;
  • сохраняют исходные имена;
  • полезны для статических ресурсов без трансформации.

Такой подход применяется для:

  • favicon;
  • больших медиафайлов;
  • ресурсов, не требующих оптимизации.

Импорт шрифтов

Шрифты в Vite обрабатываются через CSS как обычные зависимости.

Подключение через @font-face

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

Vite автоматически:

  • обрабатывает путь как модульную зависимость;
  • перемещает файл в сборку;
  • заменяет путь на итоговый URL.

Поддерживаемые форматы

На уровне сборки одинаково обрабатываются:

  • woff
  • woff2
  • ttf
  • otf
  • eot (для старых систем)

Оптимизация шрифтов

Vite применяет стандартные оптимизации:

  • хеширование имени файла;
  • кеширование через HTTP заголовки;
  • разделение ассетов по чанкам при необходимости.

Медиафайлы: аудио и видео

Vite одинаково работает с изображениями, шрифтами и мультимедиа.

Импорт аудио

import sound from './media/click.mp3';

const audio = new Audio(sound);
audio.play();

Импорт видео

import videoUrl from './media/intro.mp4';

const video = document.createElement('video');
video.src = videoUrl;
video.controls = true;

document.body.appendChild(video);

Все медиафайлы проходят через тот же механизм:

  • анализ зависимости;
  • перемещение в build output;
  • генерация URL.

Инлайн и порог оптимизации

Vite автоматически решает, инлайнить файл или нет, на основе размера.

Настройка:

// vite.config.js
export default {
  build: {
    assetsInlineLimit: 4096
  }
}

Логика:

  • файлы меньше порога → base64 inline;
  • файлы больше порога → отдельный файл с URL.

Это особенно важно для:

  • иконок;
  • небольших SVG;
  • UI-элементов.

Работа с SVG

SVG в Vite может обрабатываться несколькими способами.

Как URL

import icon from './icon.svg';

Как строка

import icon from './icon.svg?raw';

Как инлайн-элемент

SVG можно вставить напрямую в DOM:

import icon from './icon.svg?raw';

document.body.innerHTML = icon;

Base путь и деплой

При сборке важно учитывать параметр base:

export default {
  base: '/app/'
}

Все ассеты (изображения, шрифты, медиа) автоматически получают корректный префикс.

Пример результата:

<img src="/app/assets/logo.8d7f3a.png">

Динамическая загрузка ассетов

Vite поддерживает динамический импорт изображений через шаблонные пути:

const images = import.meta.glob('./assets/*.png', {
  eager: true,
  import: 'default'
});

console.log(images);

Это даёт:

  • автоматический сбор ассетов;
  • генерацию карты ресурсов;
  • доступ к файлам без ручного импорта.

Разделение ассетов по типам

Vite классифицирует ресурсы:

  • изображения → image assets
  • шрифты → font assets
  • медиа → media assets
  • текст → raw assets

Это влияет на:

  • имя выходного файла;
  • директорию сборки;
  • стратегию кэширования.

Кэширование и хеширование

Каждый ассет получает уникальный хеш:

logo.3f2a1c8d.png

Преимущества:

  • безопасное долгосрочное кэширование;
  • автоматическое обновление при изменении файла;
  • отсутствие конфликтов имён.

CSS и медиаресурсы

Помимо JS, ресурсы подключаются напрямую в CSS:

.background {
  background-image: url("./images/bg.jpg");
}

Vite автоматически:

  • обрабатывает путь;
  • заменяет его на итоговый URL;
  • включает файл в граф сборки.

Импорт медиа в рамках компонентов

В современных UI-подходах (React, Vue, Svelte) ресурсы импортируются прямо в компонентах:

import avatar from './assets/avatar.png';

export default function Profile() {
  return `<img src="${avatar}" />`;
}

Такой подход обеспечивает:

  • строгую связность компонентов и ресурсов;
  • предсказуемость путей;
  • автоматическую оптимизацию сборки.

Итоговая модель обработки ресурсов

Vite рассматривает все статические файлы как модули с единым принципом обработки:

  • импорт → анализ зависимости;
  • трансформация → оптимизация и хеширование;
  • сборка → размещение в output директории;
  • использование → получение URL или строки содержимого.
Оглавление