Donc j'essaie d'utiliser une instruction if mais je ne sais pas comment la formuler correctement, ou si je peux avec React dans un fichier jsx. Mon objectif est de sélectionner l'image en fonction de l'attribut de prénom que j'ai choisi et travaillé.Voici donc le code de l'App.js. J'essaie de le garder aussi simple et basique que possible afin que je puisse essayer de trouver une manière propre et agréable pour le faire mais je n'ai aucune idée. Merci :)

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;

Voici maintenant le code du fichier 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;
0
ALTHEPAL78 31 oct. 2020 à 07:13

2 réponses

Meilleure réponse

Il vous suffit d'ajouter l'attribut src de l'image comme dynamique. donc dans ton code

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

Ici emplacement est le chemin d'accès au fichier

MODIFIER webpack nécessite l'importation de fichiers supplémentaires afin

   <img className="card-img-top" src=require({`location/${firstname}.jpg`}) alt="Card image" />
0
sharun k k 31 oct. 2020 à 13:08

Merci beaucoup d'avoir essayé @ Sharun K K, mais même si c'était peut-être quelque chose que je faisais mal, cela n'a pas fonctionné pour moi. J'ai plutôt ajouté une image dossier dans la section publique et a fait cette ligne de code

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

Donc cela a fait des merveilles pour moi encore une fois merci beaucoup pour l'aide :). Un autre problème avec ceci était que j'ai mis un nom dans le fichier App.js que j'ai fait

// 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. 
0
ALTHEPAL78 31 oct. 2020 à 14:58