gpt4 book ai didi

javascript - 如何在 react 中通过 Prop 导入图像并使用 'import' 路径

转载 作者:数据小太阳 更新时间:2023-10-29 05:43:56 26 4
gpt4 key购买 nike

<分区>

我将以下内容作为 Prop 传递。

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

我在这里做的是使用数组中的上述字符串传递给一个组件,然后使用相应的路径从该组件生成图像,但是当我传递 Prop 时,它们显示为字符串,就像 Eliana 一样显示在 img src 中吗?

如何获取对应的路径?可能是某种字符串转换?我打赌这很简单!

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com