Wie Bild-URL als Requisite in React übergeben werden

Question

Ich habe ein Bild-URI, die ich als Prop zu übergeben, so dass ich es laden kann, wenn es die Komponente gerendert wird. wie ich Bilder ändern werde, kann ich kein statisches Uri haben. aber ich bekomme immer diesen Fehler

obwohl es funktioniert, wenn ich die Bilder statisch laden. Auch ich muss das img Element und nicht Image verwenden.

require('./cube.jpg') 

hier ist mein Code

hier wird erklärt, meine Elternklasse die Komponente:

imageurl: './cube.jpg', 

Kind Komponente:

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

imageurl Zustand definiert ist als

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

Haben Sie das anders herum versucht? Ich nehme an, dass Sie die Bilder in Ihre Elternkomponente importieren werden. Der Grund, warum Sie diesen Fehler erhalten, liegt wahrscheinlich auch daran, dass sich Ihre Elternkomponente und Ihre untergeordnete Komponente nicht in demselben Verzeichnis befinden. Der Image-Pfad ist ./cube relativ zu Parent, was bedeutet, dass er sich im selben Verzeichnis wie Parent befindet.

geordnete Komponente

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

Kinder Komponente

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