Установка backgroundImage с помощью встроенных стилей React

Я пытаюсь получить доступ к статическому изображению для использования внутри встроенного 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 } /> работает просто отлично.

Спасибо!

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

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

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

backgroundImage: `url(${Background})`

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

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

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

backgroundImage: `url(${Background})`

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

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

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'
}}

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

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

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

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

backgroundImage: `url(${Background})`

попробуй это:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

Для меня то, что сработало, это так

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

Вы можете попробовать usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")