[解決済み] 画像を動的に追加する React Webpack

質問

ReactとWebpackで画像を動的に追加する方法を考えています。 私は下に画像フォルダを持っている src/images の下にコンポーネントがあり src/components/index . 私はwebpackのために以下の設定でurl-loaderを使用しています。

    {
      test: /\.(png|jpg|)$/,
      loader: 'url-loader?limit=200000'
    }

このコンポーネントの中に require(image_path) を追加できることは知っていますが、私はコンポーネントを一般的なものにし、親コンポーネントから渡された画像のパスをプロパティとして取得できるようにしたいです。

私が試したのは

<img src={require(this.props.img)} />

実際のプロパティについては、プロジェクトルートから、リアクトアプリルートから、そしてコンポーネント自体から、画像への思いつく限りのパスを試してみました。

ファイルシステム

|-- src
|   ` app.js
|   `--images
|      ` image.jpg
|      ` image.jpg
|   `-- components
|      `parent_component.js
|      `child_component.js

親コンポーネントは基本的に、複数の子コンポーネントを保持するためのコンテナなので...

<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....

反応とwebpackとurl-loaderを使ってこれを行う方法はありますか、それとも私はこれをアプローチするために間違った道を行くのでしょうか？

どのように解決するのですか？

ここで説明されている url-loader を使用します ( SurviveJS - 画像の読み込み ) を使って、あなたのコードで使用することができます。

import LogoImg from 'YOUR_PATH/logo.png';

と

<img src={LogoImg}/>

編集：正確には、このテクニックでjsアーカイブに画像がインライン化されます。それは小さい画像のために価値があることができますが、技術を賢明に使用します。