Question

我是React的新手，但我认为这是开发网络应用程序的方式，所以我努力学习。

* 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>

显示图像的紫色背景，但不显示图像本身...当我放置HTML版本时，它可以正常工作：

*** 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>

如何使用ReactJS显示图像？

Answer 1

我不认为你在render中正确地关闭了标签;看起来顶部的<div>和img标记没有结束标记。你的控制台是否有任何错误？

修改这在带有示例图像的笔中呈现正常：http://codepen.io/kiresuah/pen/JRYGJL?editors=1010，我怀疑它与您的静态文件结构或如何导入图像有关。

使用React显示图像

1 个答案: