CODEWITHSUNDEEP
javascriptjqueryhtmlreactjs
cybertextron
cybertextron

Reputation: 10961

Displaying an image using React

I'm a totally newbie with React, but I think it's the way to develop web applications, so I'm making the effort to learn.

* login.js: *

var ImageFrame = React.createClass({
    render: function() {
        return (
          <div className="bg-pic">
            <img src={"assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg"} data-src="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" data-src-retina="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" alt="" className="lazy" />
            <div className="bg-caption pull-bottom sm-pull-bottom text-white p-l-20 m-b-20">
              <h2 className="semi-bold text-white">
                        HelloWorld makes the world look easy.
              </h2>
              <p className="small">
                All work copyright of respective owner, HelloWorld Inc.
              </p>
            </div>
          </div>
        );
    }
});

ReactDOM.render(
    <ImageFrame />,
    document.getElementById('image_container')
);

* login.html *

<body class="fixed-header">
    <div id="image_container" class="login-wrapper"></div>
    <script type="text/babel" src="assets/js/login.js"></script>
</body>

The purple background for the image is displayed, but not the image itself ... when I place the HTML version it works just fine:

*** HTML ****

<div class="bg-pic">
   <!-- START Background Pic-->
   <img src="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" data-src="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" data-src-retina="assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg" alt="" class="lazy">
   <!-- END Background Pic-->
   <!-- START Background Caption-->
   <div class="bg-caption pull-bottom sm-pull-bottom text-white p-l-20 m-b-20">
   <h2 class="semi-bold text-white">
       HelloWorld makes the world look easy.</h2>
   <p class="small">
       All work copyright of respective owner, HelloWorld Inc.
   </p>
   </div>
   <!-- END Background Caption-->
</div>

How can I get to display the image using ReactJS?

Upvotes: 0

Views: 501

Answers (1)

erik-sn
erik-sn

Reputation: 2600

I don't think you are closing tags correctly in the render; it looks like the top <div> and img tags have no closing markers. Is your console giving any errors?

edit: This is rendering ok in a pen with a sample image: http://codepen.io/kiresuah/pen/JRYGJL?editors=1010, I suspect it has something to do with your static file structure or how you are importing the image.

Upvotes: 1

Related Questions