React + Webpackで相対img src routeを渡すことができません

Question

React + Webpackのthis.propsで相対img src routeを動的に渡すことはできません。

これは、親コンポーネントの非常に単純化された部分です。それは、いくつかのデータリストを繰り返し、ImgComponentsを渡して小道具を渡します。

return (
     <div> 
     <ImgComponent srcProp={videolist.anotherImage.src} /> 
     </div> 
    ); 

ImgComponentがあります：ここでの唯一のごく一部である私はthis.props.srcPropに渡すようコンソールで

render() { 
    return (
     <div> 
      <img src={`${this.props.srcProp}`} /> 
     </div> 
    ); 
    } 

は、私はまったく同じルートを取得するが、それは見つけられないでしょうフォルダとそのimgがあります。 webpackがimgをロードしないかのように。ここ はコンソールです：

<img src="framework/assets/images/cover-bigbuckbunny.png" class="_2WcF9ZmcK-9bQX6jKk18Y_" data-reactid=".0.1.1:$comedy.0.0.$0.0.0.0"> 

どんなに私が示す何ルート、IMGは、フォルダに格納されていません。ところで

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" } 

：ここ

はPNGのためのWebPACKの設定です。それは私がファイルを必要とする場合と同様に、正常に動作します：WebPACKのは、それをロードしないよう http://route.to.some.img

のように、

<img src={require ('framework/assets/images/cover-bigbuckbunny.png')} /> 

または一部のリモートルートを示しているらしいです。 srcを{this.props.src}で動的に渡すことで、ローカルimgファイルを動的にロードするにはどうすればよいですか？私が見ることができるように、私が必要とするファイルを指定すると、ローダーはimgを読み込みます。しかし、このように私はそれを動的に行うことはできません。なぜならrequireは変数を取らないからです。

Answer 1

私は何を管理することは、ローカルに保存されたファイルへの敗走を含む、オブジェクトにrequire('../../assets/images/myFirst.img')にある：playlist.js

で

export default (
    { 
    cartoons: [{ 
     images: { 
     poster: require('../../assets/images/myFirst.png') 
     }, 
     streams: [{ 
     type: 'mp4', 
     url: 'http://media.w3.org/2010/05/bunny/movie.mp4' 
     }] 
    }); 

それから私は、任意のオブジェクトと同様に、このリストで作業：

import playlist from '../../playlist'; 

このオブジェクトを通常の方法で繰り返します。画像がそこに表示されます。

Answer 2

Webpackは、可能なすべての参照を見つけてファイルに変換するためにコードを走査しません。

次のコードを考えてみましょう：

<img src={'/foo/bar/baz.jpg'} /> 

をそれはbaz.jpgは、あなたのWebアプリケーションのルートの下にfoo/barディレクトリにコピーされることを保証するために（おそらくビルドターゲットを使用して）あなたの責任です。