Question

我有一个图像uri，我想作为道具传递，以便我可以在渲染组件时加载它。因为我将改变图像，我不能有一个静态的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} />

Answer 2

你可以做到

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

并在标签中使用任何名称作为道具，然后将其传递！

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

2 个答案: