ReactJSに自分の画像が表示されないのはなぜですか？

私はReactJSで始まっています&この簡単な画像を私の練習用Webアプリケーションに表示してもらいたいですが、表示されません。私の論理は正しいと思ったが、私はそうは思わない。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に自分の画像が表示されないのはなぜですか？

答えて

関連する問題