How can i set background-image from props. I tried different variations but cant get it to work. css is showing in html but image is not being displayed.
const cover = "http://www.w3schools.com/css/trolltunga.jpg";
class App extends React.Component {
render(){
return(
<div>
<h2>Hey</h2>
<Child image = {cover} />
</div>
)
}
}
class Child extends React.Component{
render(){
const style = {
backgroundImage: "url("+this.props.image+")",
backgroundSize: "100% 100%"
}
return(
<div style={style}></div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById("app")
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<div id="app"></div>Problem is ur div is empty, thats why background image is not visible. put some content inside that, it will be visible, Try this:
<div style={style}>Add background</div>
check the jsfiddle, ur code is working properly. I just added the above line in that: https://jsfiddle.net/0z38gozj/