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