reactjsは動的

Question

を明確にするために画像をレンダリング：

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

正常に動作します

。しかし、私はこのパスをAPIから文字列として動的に取得したい。私の親コンポーネントでは、私はそれを取得し、子供に渡します。この場合

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

this.props.imageは「../styles/myimage.jpg」と同じです。しかし、それは「エラーを（約束に）捕捉されない：モジュールが見つかりません」私のために働くと、このエラーをスローしません。」

私はそれを修正するにはどうすればよい

ディレクトリツリーがある（私はMYIMAGEを取得しようとしています？ image.jsから.JPG）enter image description here： そしてWebPACKの設定：enter image description hereは、あなたが何ができるかのコメントに加えて

Answer 1

あなたのrenderメソッドである。この方法を試してください。

if (!this.props.image) return false; 

Answer 2

は簡単なテストを行い、スタイルを動かしますパス

props.image = './styles/myimage.jpg' 

その後、

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