Question

我开始使用ReactJS＆amp;我希望这个简单的图像出现在我的练习网络应用程序上，但它并没有出现。我认为我的逻辑是正确的，但我猜不是。

这是我的index.html文件：

<!DOCTYPE html>
<html>

  <head>
     <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>
    <div id="body"></div>

    <script type="text/babel" src="index.js"></script>
    <script type="text/babel" src="body.js"></script>
  </body>

</html>

这是我的body.js文件：

import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.

var Body = React.createClass({
  render: function() {
    return(
      <img src={myPic}></img>
    );
  }
});

ReactDOM.render(<Body />, document.getElementById('body'));

我得到的错误是：

`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`

Answer 1

浏览器可能不支持require / import 试试这个：

var Body = React.createClass({
 render: function() {
 return(
  <img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));

为什么我的照片出现在ReactJS中？

1 个答案: