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

【问题标题】：How to pass image url as prop in React如何在 React 中将图像 url 作为道具传递
【发布时间】：2018-05-12 20:18:36
【问题描述】：

我有一个图像 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>
);

【问题讨论】：

另外，避免在 refs 中使用字符串字面量。
我知道这有点晚了，但我遇到了同样的问题，这个答案为我解决了。希望这对某人有所帮助。 stackoverflow.com/a/45334965/6115855

标签： reactjs frontend jsx

【解决方案1】：

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

父组件

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

子组件

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

【讨论】：

组件位于同一目录中，我尝试直接加载图像而不使用您建议的 require，但它不会引发错误，也不会出现任何内容。我也尝试使用绝对路径但没有运气。
为了使 require 工作，组件必须在组件加载或初始化之前知道图像的来源？还是应用程序在构建/编译时？

【解决方案2】：

你可以这样做

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

并将任何名称作为标签中的道具，然后传递它！

【讨论】：