m03a3a17 m03a3a17 - 3 months ago 39
React JSX Question

react.js image is not getting loaded

i am trying to put the background image of the div but nothing works for me.
I am quite new to react.js

There is no error in the console also.(Path is correct)

My code like like this.
I am using jsx file format

render() {

var divStyle = {
backgroundImage: "url('desktop_wallpaper_by_maria_shanina.png')"
}

return (

<div className="background" style={divStyle} >

<div id="loginpanel">
<br/>
</div>
</div>
)


Mycode is like this. no error.. but there is no image on screen also.

What should i do? Thanks

Answer

http://codepen.io/jmsherry/pen/mEYRLW?editors=0010

It does work. Can you see that style turning up in your css inspector?

var mountNode = document.getElementById('app');
console.log(mountNode, React, ReactDOM);

var HelloMessage = React.createClass({
  render: function() {
    var styles = {
      border: "1px solid",
      color: "#fff",
      height: "200px",
      backgroundImage: "url(https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg)"
    };
    return (
      <div style={styles}>Seconds Elapsed:</div>
    );
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);
Comments