Настройка backgroundImage с использованием встроенных стилей

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

В общем, я думал, вы просто сделали следующее:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

Это работает для тегов <img>. Может кто-нибудь объяснить разницу между этими двумя?

Пример:

<img src={ Background } /> работает отлично.

Спасибо!

Ответ 1

Неверные фигурные фигурные скобки внутри свойства backgroundImage.

Возможно, вы используете webpack вместе с загрузчиком файлов изображений, поэтому Background должен быть уже String: backgroundImage: "url(" + Background + ")"

Вы также можете использовать шаблоны строк ES6, как показано ниже, для достижения того же эффекта:

backgroundImage: `url(${Background})`

Ответ 2

Если вы используете ES5 -

backgroundImage: "url(" + Background + ")"

Если вы используете ES6 -

backgroundImage: 'url(${Background})'

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

Ответ 3

Встроенный стиль для установки любого изображения на весь экран:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

Ответ 4

Вы также можете перенести изображение в компонент с помощью функции require().

<div style={{ backgroundImage: 'url(require("images/img.svg"))' }}>

Обратите внимание на два набора фигурных скобок. Первый набор предназначен для входа в режим реакции, а второй - для обозначения объекта.

Ответ 5

Вместо этого вы можете использовать литералы шаблона (заключенные в обратный тик: '...') для свойства backgroundImage например:

backgroundImage: 'url(${Background})'