web-dev-qa-db-ja.com

React）で画像のURLを小道具として渡す方法

コンポーネントがレンダリングされたときにロードできるように、propとして渡したい画像URIがあります。画像を変更するので、静的なuriを使用することはできません。しかし、私はこのエラーが発生し続けます

Error: Cannot find module "."

画像を静的にロードすると機能しますが。また、Imageではなくimg要素を使用する必要があります。

require('./cube.jpg')

これが私のコードです

これがコンポーネントを宣言する私の親クラスです：

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

imageurlの状態は次のように定義されます。

imageurl: './cube.jpg',

子コンポーネント：

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>
);
reactjsfrontendjsx
4
Claudiga

逆に試しましたか？親コンポーネントに画像をインポートすることを想定しています。また、このエラーが発生する理由は、親コンポーネントと子コンポーネントが同じディレクトリにないことが原因である可能性があります。画像パスは./cube親を基準とします。これは、親と同じディレクトリにあることを意味します。

親コンポーネント

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

子コンポーネント

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

あなたはこれを行うことができます

<img src={require(${this.props.YourPropName})} alt="My Image"/>

タグの小道具として任意の名前を取り、それを渡します!!

0
Udit Raj