Встановлення фонового зображення з реактивними вбудованими стилями

Я намагаюся отримати доступ до статичного зображення, яке потрібно використовувати в межах вбудованого 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 має бути вже рядком: 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"))` }}>

Зверніть увагу на два набори фігурних дужок . Перший набір призначений для входу в режим реагування, а другий - для позначення об'єкта

Ви можете використовувати Literals шаблону (додається із зворотним галочкою: `... ') замість цього 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")