Question

所以我试图使用if语句，但是不知道如何正确地写它，或者我是否可以在jsx文件中使用React。我的目标是根据我选择并使用的名字属性选择图像，因此这是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;

Answer 1

您只需要添加图像的src属性即可。所以在您的代码中

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

此处位置是文件的路径

编辑 webpack需要导入其他文件，所以

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

Answer 2

非常感谢您尝试@ Sharun K K，但是即使我做错了某些事情，要求方式对我也不起作用。我为解决此问题并在youtube Esterling Accime！上大喊大叫的视频所做的工作，是我在公共部分添加了一个图片文件夹并执行了以下代码行

<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.

反应图像选择器

2 个答案: