Javascript 为什么赢了'；我的照片不会出现在我的照片中吗？_Javascript_Html_Css_Reactjs

Javascript 为什么赢了'；我的照片不会出现在我的照片中吗？

javascript html css reactjs

Javascript 为什么赢了'；我的照片不会出现在我的照片中吗？,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我从ReactJS开始&我希望这个简单的图像出现在我的practice web应用程序上，但它没有出现。我认为我的逻辑是正确的，但我想不是这是我的index.html文件： <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="utf-8"> <meta name="viewport" cont

我从ReactJS开始&我希望这个简单的图像出现在我的practice web应用程序上，但它没有出现。我认为我的逻辑是正确的，但我想不是

这是我的

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>

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)`

`Uncaught ReferenceError:未定义require
在eval时（在transform.run（browser.js:4613）时求值）：6:25
在Function.transform.run（browser.js:4613）
at exec（browser.js:4649）
浏览browser.js:4661
位于XMLHttpRequest.xhr.onreadystatechange（browser.js:4632）`

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

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

var Body=React.createClass({
render:function（）{
返回(
);
}
});
ReactDOM.render（，document.getElementById（'body'）；

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

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

var Body=React.createClass({
render:function（）{
返回(
);
}
});
ReactDOM.render（，document.getElementById（'body'）；

是否有任何错误被抛出，或者图像只是没有显示？@KeithA yep，我会立即将其包含在我的帖子中。是否有任何错误被抛出，或者图像只是没有显示？@KeithA yep，我会立即将其包含在我的帖子中。如果它只是字符串文字，则不需要用大括号括起来。@chompy，因为您正在导入，巴别塔正在将其转化为ES5。传输后，它使用

require

，但

require

未在浏览器中定义，而是由模块库（如RequireJS）提供。如果您不使用诸如browserify或webpack之类的打包程序将其捆绑到浏览器中，模块将无法工作，因为它们尚未实现。如果只是字符串文字，则无需用大括号括起来。@chompy，因为您正在导入，Babel正在将其转换为ES5。传输后，它使用

require

，但

require

未在浏览器中定义，而是由模块库（如RequireJS）提供。如果您不使用诸如browserify或webpack之类的打包工具将其捆绑到浏览器中，则模块将无法工作，因为它们尚未实现。