画像を読み込んでいるときの反応状態エラー

画像を表示しようとしたときにReactで奇妙な問題が発生しています。これを引き起こすコードは<img src={'./assets/logo.svg'} />タグです。ただし、エラーメッセージにもかかわらず、イメージが表示されます。画像を読み込んでいるときの反応状態エラー

エラーメッセージは以下の通りである：任意の提案が高く評価されている

import React from 'react'; 
 
import ReactDOM from 'react-dom' 
 
require('../img/logo.svg'); 
 

 
export default class App extends React.Component { 
 

 
constructor(props) { 
 
    super(props);   
 
} 
 
render() { 
 
    return (
 
     <div className="app-wrapper"> 
 
      <img src={'./assets/logo.svg'} /> 
 
     </div> 
 
    ) 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Pegasus</title> 
 
</head> 
 

 
<body> 
 
    <div id="app" /> 
 
    <script src="app.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

：

これは、コンポーネントコードであります！ありがとう!!

出典

2017-05-17 bilo-io

この線が必要ですか？ 'require（ '../ img/logo.svg'）;' –

ありがとう...この例では必要ありません。それは、画像をロードする別のアプローチから残されたばかりです –

マーティンがコメントで提案したように、3行目にrequireステートメントが必要ですか？

まず、classに閉じ括弧がありません。第二に、importまたはrequireのいずれかの画像が必要です。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import logo from './assets/logo.svg'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div className="app-wrapper"> 
     <img src={logo} /> 
     {/* OR <img src={require('./assets/logo.svg')} /> */} 
     </div> 
    ); 
    } 
}

あなたはString型であるpropsを下に渡している最後の注意、あなたが{}でそれらをラップする必要はありません、あなたは、このようなようにそれらを渡すことができます。

<Navigation title="My Navigation" />

出典

2017-05-17 12:33:03 Dan

画像を読み込んでいるときの反応状態エラー

答えて

関連する問題