如何通过道具反应导入图像并使用"导入"路径

Question

我将以下作为道具传递给我.

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

我在这里做的是使用数组中的上述字符串传递给组件,然后通过使用相应的路径从该组件生成图像,但是当我传递道具时,它们显示为字符串,就像Eliana将显示为在img src？

我如何获得相应的路径？某种字符串转换可能吗？我打赌这是一个简单的!

Answer 1

轻松解决您所询问的问题

<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`)}/>

请务必记录下来.你肯定想记录这个.