Установка backgroundImage в React: разница с тегом <img>

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

Для присвоения фонового изображения компоненту React задайте свойство style с параметром backgroundImage и примените функцию url(), отмотавшись до контр-адреса изображения:

<div style={{ backgroundImage: "url('your-image.jpg')" }}>Контент</div>

Убедитесь, что путь к изображению ограждён кавычками внутри url() и используйте фигурные скобки {} для прямого включения стилей в JSX.

Webpack, ES6 и чародейство require

При помощи webpack возможно легко объединять изображения с помощью file-loader или url-loader, что способствует улучшению управления вашими ресурсами. Эти средства помогут подойти к подключению изображений к проекту грамотно.

Благодаря шаблонным строкам ES6, код станет красивее и более понятным:

// Не более того, как сказать 'Абракадабра' и сделать жест мышкой 🪄.
const backgroundImage = `url(${require('./path/to/your-image.jpg')})`;

<div style={{ backgroundImage }}>Контент</div>

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

Инлайн-стили в мире динамики

Жизнь не застывает на месте, и нам часто приходится обновлять фоновые изображения в ответ на свойства или состояния. В этих случаях шаблонные строки ES6 также окажутся полезными:

// Это точно так же, как подобрать наряд для каждого случая жизни! 
<div style={{ backgroundImage: `url(${props.imagePath})` }}>Контент</div>

Не забудьте, пользователи webpack, настроить загрузчик изображений – это ваша ответность.

CamelCase в стилях React

В React стили предпочитают оформляться в нотации camelCase вместо kebab-case. Руководствуйтесь этим принципом, чтобы свойства стилей чувствовали себя в предельном комфорте.

Поддерживайте ваше изображение в высокой готовности

Для того чтобы изображение корректно покрывало фон, используйте значение backgroundSize равное 'cover':

// Большой размер – это хорошо, не правда ли?
<div style={{ backgroundImage: `url(${Background})`, backgroundSize: 'cover' }}>Контент</div>

Чтобы избежать повторения изображения, установите backgroundRepeat: 'no-repeat', и центрируйте его при помощи backgroundPosition: 'center'.

Упрощённый синтаксис для счастливого кода

Когда работаете только с фоновыми изображениями, можно обратиться к упрощённому синтаксису. Это как освободить код от излишеств:

const backgroundStyle = {
  // К счастью, эти скобки здесь не нужны!
  backgroundImage: `url(${Background})`,
  // Здесь можете продолжать добавлять стили. Меньше мусора, больше радости!
};

<div style={backgroundStyle}>Контент</div>

Помним, коллеги, важна последовательность, вне зависимости от того, пишете ли вы на ES5 или ES6.

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

Установка фонового изображения сопоставима с одеждой для веб-страницы (👕):

// Инлайн-стиль в React:
<div style={{ backgroundImage: 'url(path/to/image.jpg)' }}></div>

Это точно так же, как если бы:

Веб-страница (🖥): Простая и скромная
Новый наряд (👕): url(path/to/image.jpg)

Облачите вашу веб-страницу (🖥) в стильную новинку с изображением (👕).

Подробнее об этом расскажет наш спикер на видео

Окончательный вид: 🖥👕✨

Проверка состояния

Ошибки неизбежны, как налоги или утренняя печаль по понедельникам. Здесь несколько советов, чтобы минимизировать риск распространённых ошибок:

• Функция require может оказаться подвохом. Загружайте изображения с учетом собственной эффективности, чтобы повысить производительность.
• Недосмотр, опечатки, неправильные символы — всё это легко проскользнуть в синтаксис JSX. Проверяйте несколько раз, чтобы избегать распространённых ошибок.
• Правильно используйте атрибут style. Даже профессионалы иногда путают его с атрибутом src в тегах изображений.

Реактивное изображение на фоне

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

// Различный образец в зависимости от размера экрана устройства!
const mobileBackgroundImage = `url(${mobileImage})`;
const desktopBackgroundImage = `url(${desktopImage})`;

const backgroundStyle = {
  backgroundImage: window.innerWidth < 768 ? mobileBackgroundImage : desktopBackgroundImage,
  // Здесь можете добавить другие стили для адаптивности!
};

<div style={backgroundStyle}>Контент</div>

Сочетание инлайн-стилей и CSS

Когда управление инлайн-стилями кажется трудной задачей, не стесняйтесь обратиться к CSS за помощью:

/* Пусть CSS придёт вам на помощь! */
.background {
  background-size: cover;
  background-position: center;
}
/* Теперь ваш React-компонент получает в альянсе мощного союзника! */
<div className="background" style={{ backgroundImage: `url(${Background})` }}>Контент</div>

Ищите равновесие между мощностью CSS и простотой JSX для симбиоза преимуществ!

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