Как в react сделать background-image если картинка в props?

Question

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

Answer 1

В 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 тут

БЛОГ НА HUSL

Как в react сделать background-image если картинка в props?

Ответы (1 шт):