0

В react я получаю картинку с API и мне нужно сделать ее как background-image.Могу ли я как то передать ее в css или есть другие способи так сделать? Пробовал вот так <div className="" style={{background-image: {this.props.filmPoster}}}>,но так не работает.

1 ответ 1

0

В inline стилях в React если имена какого то CSS свойство больше одного слово как у вас background-image надо имена CSS стилей писать слитно правильно будет backgroundImage.

Также надо url указывать для этого CSS свойства.

Я сделал небольшой пример отправляю картинку с одного компонента в другой как props.

export default function App() {
  const [state] = useState(
    "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
  );

  return (
    <div className="App">
      <Image sendUrl={state} />
    </div>
  );
}

Компонент Image

class Image extends React.Component {
  render() {
    return (
      <div
        style={{
          backgroundImage: `url(${this.props.sendUrl})`,
          width: "500px",
          height: "250px"
        }}
      />
    );
  }
}

Codesandbox тут

2
  • Спасибо огромное)
    – Volodumr
    16 мар 2020 в 9:16
  • @Volodumr всегда пожалуйста :)
    – Randall
    16 мар 2020 в 10:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.