使用 React 显示图像答案

【问题标题】：Displaying an image using React使用 React 显示图像
【发布时间】：2016-09-09 22:25:01
【问题描述】：

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

* 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 显示图像？

【问题讨论】：

对 src 使用 require src={require("assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg")}
也许从你的 src 属性中删除大括号 {}，它们用于评估 jsx 表达式。
@RobbertvanElk ...data-src 标签怎么样？
@Stefan.B 删除 {} 并没有解决问题:-(
它不能与 data-src 的要求一起使用吗？

标签： javascript jquery html reactjs

【解决方案1】：

我认为您在 render 中没有正确关闭标签；看起来顶部的 <div> 和 img 标签没有结束标记。你的控制台有错误吗？

编辑： 这可以在带有示例图像的笔中渲染：http://codepen.io/kiresuah/pen/JRYGJL?editors=1010，我怀疑这与您的静态文件结构或您如何导入图像有关。

【讨论】：

Erik，当我在 src http://localhost:8080/html/assets/img/demo/new-york-city-buildings-sunrise-morning-hd-wallpaper.jpg 中提供图像的完整路径时，它仍然无法正常工作。
codepen 使用 react & react-dom 15.3.1，并通过 babel 进行编译 - 与您的设置有什么不同吗？