Как загрузить изображения из папки 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) |
Полезные материалы
- Использование публичной папки в Create React App — подробное руководство по работе с публичной папкой в проектах на React.
- Добавление изображений, шрифтов и файлов в проекте Create React App — рекомендации по импорту изображений и других ресурсов.
- Добавление пользовательских переменных окружения в проекте Create React App — использование переменных окружения для управления публичной папкой.
- Организация структуры папок • GitHub — примеры организации отличной структуры папок в проектах на React.
- 6 забавных идей для проектов на React — подборка креативных проектов для оттачивания навыков в React.