reactjs - 如何在 React 中将图像 url 作为 prop 传递

Question

我有一个图像 uri，我想将其作为 prop 传递，以便在渲染组件时可以加载它。因为我将更改图像，所以我不能有静态 uri。但我不断收到此错误

Error: Cannot find module "."

虽然当我静态加载图像时它确实有效。我还需要使用 img 元素而不是 Image。

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>
);

Answer 1

你有没有尝试过相反的方法？我假设您将在父组件中导入图像。此外，您收到该错误的原因可能是因为您的父组件和子组件不在同一目录中。图像路径是相对于Parent的./cube，这意味着它与Parent位于同一目录中。

父组件

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

子组件

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