Как загрузить изображения из папки public в ReactJS

Быстрый ответ

В ReactJS доступен удобный способ обращения к изображениям из публичной директории. Он осуществляется через переменную окружения process.env.PUBLIC_URL, указывающую на публичную папку:

<img src={`${process.env.PUBLIC_URL}/path/to/image.png`} alt="Описание" />

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

Использование динамических путей к изображениям

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

const imageName = 'dynamicImage.png';
<img src={`${process.env.PUBLIC_URL}/path/to/${imageName}`} alt="Динамическое изображение" />

Подключение изображений без использования Webpack в небольших проектах

В небольших проектах достаточно указать прямой путь к изображению для его подключения, без использования Webpack:

<img src="/images/myImage.jpg" alt="Прямое подключение" />

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

Основы организации структуры папок

Тщательная организация структуры папок в проекте играет важную роль и облегчает последующую работу с ним:

📁 React-приложение
  └ 📁 public
    └ 📁 assets
      └ 📁 images
        └ 📁 icons
        └ 📁 banners

Поддерживайте порядок в структуре папок – это важно.

Продвинутые методы: использование загрузчиков с Webpack

Для более продвинутого управления ресурсами, например, при реализации ленивой загрузки или размещения данных на CDN, можно воспользоваться ресурсами Webpack и его загрузчиком url-loader. Он позволяет работать с изображениями как с URL:

// Импорт изображения через url-loader в Webpack
import myImage from "./images/myImage.jpg";

// Конфигурация в Webpack.config.js
{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
      },
    },
  ],
}

Кроссдоменное использование ресурсов (CORS) и внешние изображения

Для использования изображений из внешних источников может потребоваться настройка политик CORS на сервере или использование прокси-сервера из-за ограничений CORS.

Визуализация

Структура для доступа к изображениям, хранящимся в публичной папке ReactJS, выглядит следующим образом:

📁 React-приложение
  └ 📁 public
     └ 🎞 images
        └ 🖼 myImage.jpg

Доступ к сохранённым изображениям осуществляется напрямую путем указания пути:

<img src={process.env.PUBLIC_URL + '/images/myImage.jpg'} alt="Изображение" />

Внедрение изображений в React-приложение простое и приятное, как легкое развлечение:

| JSX-код                                                       | Внешний вид в приложении            |
|---------------------------------------------------------------|-------------------------------|
| `<img src={process.env.PUBLIC_URL + '/images/myImage.jpg'}/>` | ![Мороженое](/images/myImage.jpg) |

Полезные материалы

1. Использование публичной папки в Create React App — подробное руководство по работе с публичной папкой в проектах на React.
2. Добавление изображений, шрифтов и файлов в проекте Create React App — рекомендации по импорту изображений и других ресурсов.
3. Добавление пользовательских переменных окружения в проекте Create React App — использование переменных окружения для управления публичной папкой.
4. Организация структуры папок • GitHub — примеры организации отличной структуры папок в проектах на React.
5. 6 забавных идей для проектов на React — подборка креативных проектов для оттачивания навыков в React.