如何在反应中通过道具导入图像并使用“导入”路径[重复]

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

请务必记录这一点。你一定要记录下来。

Answer 2

您可以使用连接整个 URL除了名称，然后连接 name 属性。

<img src={require('../assets/imgs/people/' + this.props.name + '.png')}