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

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

Понимание встроенных изображений

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

Настройка Фоновые изображения со встроенными стилями

Настройка фонового изображения с использованием встроенных стилей предполагает использование свойства backgroundImage и предоставление URL-адреса изображения в качестве значения. Основное отличие здесь в том, что свойство backgroundImage ожидает строку, содержащую URL-адрес, а не переменную или выражение JavaScript.

Правильный синтаксис:

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

В этом примере переменная Background уже представляет собой строку, содержащую путь к изображению, благодаря таким инструментам, как веб-пакет и его загрузчик файлов изображений.

Неверный синтаксис:

const sectionStyle = {
  backgroundImage: "url("   { Background }   ")", // Incorrect
};

Неправильный синтаксис использует фигурные скобки вокруг { Background }, что необязательно и может привести к ошибкам.

Использование строковых шаблонов ES6

Альтернативой использованию конкатенации строк является использование шаблонов строк ES6. Это позволяет сделать синтаксис более чистым и кратким:

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

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