Изображения

Изображения — один из самых частых типов ресурсов в веб-приложениях. В React-проектах, собранных с помощью Webpack или Vite, изображения (.png, .jpg, .jpeg, .gif, .webp) можно импортировать напрямую в компоненты. При импорте сборщик копирует файл в папку сборки, добавляет хеш к имени для эффективного кэширования и возвращает строку с корректным путём к изображению.

Как импортировать изображение

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

function App() {
  return <img src={logo} alt="Логотип" />;
}

Переменная logo содержит абсолютный путь к скомпилированному файлу (например, /static/media/logo.abcd1234.png). Этот путь безопасно использовать в атрибуте src.

Почему нельзя использовать строку напрямую

Запись вида <img src="./assets/logo.png" /> не работает в продакшене, потому что:

  • Сборщик не распознаёт строку как зависимость,
  • Файл не копируется в папку сборки,
  • В итоге браузер получает путь к несуществующему ресурсу.

Только импорт гарантирует, что изображение будет включено в бандл и доступно после сборки.

Рекомендации

  • Храните изображения в папке src/assets/images/ или подобной — это упрощает навигацию и поддержку.
  • Используйте относительные пути при импорте (начинаются с ./ или ../).
  • Для иконок и простых графических элементов рассмотрите использование SVG как компонента — это даёт больше контроля над стилями.