Javascript 反应图像选择器

因此，我尝试使用if语句，但不知道如何正确地使用它，或者是否可以在jsx文件中使用React。我的目标是根据我选择和使用的first name属性选择图像，因此这里是App.js的代码，我试图让它尽可能简单和基本，这样我就可以尝试找到一个干净的方法来完成它，但我没有任何线索。谢谢:

import './App.css';

import PersonalCard from './components/personal.jsx'

function App() {
  return (
    <div className="App">
        <PersonalCard firstName="Lou" lastName="Ferrigno" age={68} hairColor="Black" />
        <PersonalCard firstName="Arnold " lastName="Schwarzenegger " age={73} hairColor="Brown" />
        {/* Franco died in 2019 at the age of 78 :'(  */}
        <PersonalCard firstName="Franco" lastName="Columbu " age={79} hairColor="Brown" />
        <PersonalCard firstName="Frank " lastName="Zane " age={78} hairColor="Black" />
    </div>
  );
}

export default App;

下面是jsx文件的代码

import React from 'react';


const theW ={
    width:'400px',
}

const PersonCard = props => {

    const {lastName,firstName,age,hairColor} = props
    return(
        <div className="card" style={theW}>
            <img className="card-img-top" src="" alt="Card image"></img>
            <section className="card-body">
                <h1 className="card-title">{ lastName }, { firstName }</h1>
                <p className="card-text">Age: { age }</p>
                <p className="card-text">Hair Color: { hairColor }</p>
                <a href="#" class="btn btn-primary">See Profile</a>
            </section>
        </div>
    );
}
export default PersonCard;

---

您只需要将图像的src属性添加为动态。 所以在你的代码中

div className="card" style={theW}>
            <img className="card-img-top" src={`location/${firstname}.jpg`} alt="Card image"></img>

此处位置是文件的路径

编辑 网页包需要导入其他文件，以便

   <img className="card-img-top" src=require({`location/${firstname}.jpg`}) alt="Card image" />

---

非常感谢您尝试@Sharun K，但即使是我做错了什么，要求的方式对我也不起作用。 我做了什么来修复这个问题，并在youtube上对着这个视频大声喊叫！，相反，我在公共部分添加了一个图像文件夹，并执行了这行代码

<img className="card-img-top" src={`/images/${firstName}.jpg`} />

这对我来说是个奇迹再次感谢你的帮助：。另一个问题是，我在App.js文件中输入了一个名称，我这样做了

// this is wrong because of the space in the firstName 
<PersonalCard firstName="Lou " lastName="Ferrigno" age={68} hairColor="Black"  />
// so no spaces like this
<PersonalCard firstName="Lou" lastName="Ferrigno" age={68} hairColor="Black"  />
// and all my issues went away. 

---

或者有没有一种方法可以把jsx文件放进去，就像我尝试过的那样，因为我休息了一会，但它不起作用。我试过location/pic.jpg，但不知道为什么它不起作用。是的，我知道src/components/img.jpg只是想看看我是否能让一张图片正常工作，但没有用：'那么我必须像从image\\folder导入图像那样导入它们吗？好的。webpack可能会出现此错误，尝试像location/${firstname}.jpg}/>那样做，也不需要为图片添加额外的结束标记。img是一个自动关闭的元素，我不知道它为什么会这样做，LOL我从来没有用过，img标签就是这样的LOL