は、コンポーネント

Question

私はコーディングではかなり新しいです寛大してください...私は多くのことを検索し、私は私の問題が修正を取得するために管理していない:(

を反応させ、私は私を取得したいと思い、私の中で画像を取得できません。

import avatar from './avatar.png'; 

export default class Connection extends React.Component { 
    render() { 
     return (
     <div> 
      {this.props.user.firstname}&nbsp;{this.props.user.lastname} 
      &nbsp;<img src={avatar} className='img-circle' /> 
      &nbsp;&nbsp;&nbsp;<a href='#' onClick={this.props.logout}>Déconnexion</a> 
     </div> 
    ); 
    } 
} 

私はこれらのイメージをロードするために、次のWebPACKの設定を使用します：

module: { 
    loaders: [ 
     { test: /\.jsx?$/, exclude: [/node_modules/], loader: 'babel' }, 
     { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }, 
     { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'file-loader?hash=sha512&digest=hex&name=[path][name]-[hash].[ext]' }, 
     { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'url-loader?limit=10000' } 
    ] 
    } 

。タグを通って、HTMLのimgレンダリング画像私はこのような反応では最良の方法は私のイメージをインポートすることであることを見ましたそうですか そのwebpackはjpgまたはpngファイルを読み込むことができますが、表示するには生成/コピーされたファイルが利用できないようです（例：/MyApp/avatar-50b93a2df8aec266d7c8c1c0f5719d1b.pngは利用できません）。

webpack dev serverを使用しているので、ファイルがバンドルされていないため、distまたはbuildフォルダが作成されていません。

私の問題を解決する方法はありますか？

おかげで、imgタグ内必要を使用する場合

私は次のエラーを取得する：

モジュールが見つかりませんエラー：

./avatar「ファイル」または「ディレクトリ」を解決できません。私はWebPACKのの設定で拡張子を取得しようとしましたが、それは何も解決しません:(ここで

は私のWebPACKの設定で私の公共のパスの設定です：

あなたがする必要があるのWebPACKで画像をロードするために

Answer 1

：

<img src={require('./avatar.jpg'})/> 

WebPACKのは、アプリケーションのコードベースによってクロール、コードがrequire WebPACKの意志を呼び出すことによって、しかしファイルは同じ構造に保管されていない単一のファイルにバンドルされます依存関係管理を行います。この場合、ファイルが移動し、コードが注入され、バンドルされた場所を指しています。

Answer 2

この記事は、SurviveJS Bookから見ることができます。 Load Images Chapter