爲什麼我的照片不會出現在ReactJS中？

我開始與ReactJS &我想這個簡單的圖像出現在我的練習網絡應用程序，但它並沒有出現。我認爲我的邏輯是正確的，但我猜不是。爲什麼我的照片不會出現在ReactJS中？

這是我的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/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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)`

來源

2017-01-25 chompy

是否有任何錯誤被拋出或圖像是否顯示？ –

@KeithA是的，我現在將它列入我的帖子。 – chompy

需要/進口可能不被支持的瀏覽器試試這個：

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

來源

2017-01-25 05:05:21 Vikramaditya

如果它只是一個字符串文本，則不需要用大括號來包裝。 – Li357

它的工作原理！但爲什麼我的方式不行？ – chompy

@chompy因爲你正在導入，正在被Babel轉換成ES5。一旦它被轉化，它就使用'require'，但'require'沒有在瀏覽器中定義，它由模塊庫（如RequireJS）提供。如果您沒有使用像browserify或webpack這樣的打包程序將其捆綁到瀏覽器中，則模塊將無法工作，因爲它們尚未實現（尚）。 – Li357

爲什麼我的照片不會出現在ReactJS中？

回答

相關問題