如何在 React 中将图像 url 作为道具传递

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

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

父组件

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

子组件

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