我将以下内容作为道具传递。
const people=['Eliana','Stefania','Ahmed']
{
people.map(function(name, index){
return <Person item={index} name={name}/>;
})
}
import Eliana from '../assets/imgs/people/eliana.png'
import Stefania from '../assets/imgs/people/stefania.png'
import Ahmed from '../assets/imgs/people/ahmed.png'
export default class Person extends React.Component {
render() {
return (
<div>
<img src={this.props.name} alt=''/>
<li key={this.props.item}>{this.props.name}</li>
</div>
);
}
}
&#13;
我在这里做的是使用数组中的上述字符串传递给组件,然后使用相应的路径从该组件生成图像,但是当我传递道具时,它们显示为字符串,如Eliana会在img src中显示出来吗?
我如何获得相应的路径?某种字符串转换可能吗? 我打赌这很容易!
答案 0 :(得分:12)
轻松解决您的问题
<img src={require(this.props.name)} alt=''/>
但这暗示你有完整的道路。你现在拥有的东西看起来不会起作用。当React解释你的代码时,每种方法都必须以这样的方式结束路径名:
<img src={require('../assets/imgs/people/ahmed.png')} alt=''/>
一个简单的解决方法是在this.props.name
之前将路径添加为字符串。它是标准化的,所以你要做的就是添加名称,如下所示:
<img src={require(`../assets/imgs/people/${this.props.name.toLowerCase()}.png`)}/>
请务必记录下来。你肯定想记录下来。
答案 1 :(得分:2)
您可以使用连接整个URL 除之外的名称,然后将name
道具连接到其中。
<img src={require('../assets/imgs/people/' + this.props.name + '.png')}