Reactで小道具として画像urlを渡す方法

Question

私は、私が小道具として渡したいので、コンポーネントがレンダリングされるときに読み込むことができる画像URIを持っています。私はイメージを変えるので、私は静的なURIを持つことはできません。しかし、私はこのエラーが発生し続ける

Error: Cannot find module "." 

私は静的に画像を読み込むときに動作しますが、また、私は画像ではなくimg要素を使用する必要があります。ここ

require('./cube.jpg') 

私のコードはここに

あるコンポーネントを宣言私の親クラスである：

imageurl: './cube.jpg', 

子コンポーネント：

<InputSection ref="inputS" ImD={this.getData} imageUri={this.state.imageurl} /> 

IMAGEURL状態は以下のように定義されます

return(
<div style={style}> 

<br/> 

<img ref="image" src={require(this.props.imageUri)} onLoad={this._onImageChanged.bind(this)} /> 
<canvas style={{display:'none'}}width={300} height={300} ref="inputCanvas" > 

</canvas> 
</div> 
); 

Answer 1

他の方法で試しましたか？私は親コンポーネントの画像をインポートすることを前提としています。また、そのエラーが発生している理由は、親コンポーネントと子コンポーネントが同じディレクトリにないためです。イメージパスはParentとの相対的な./cubeです。つまり、Parentと同じディレクトリに存在します。

親コンポーネント

<InputSection ref="inputS" ImD={this.getData} imageUri={require(this.state.imageurl)} /> 

子コンポーネントも

<img ref="image" src={this.props.imageUri} />