Je n'obtiens aucune erreur, l'image ne s'affiche pas, comment ajouter une image? Je pense que la syntaxe que j'ai utilisée est fausse. veuillez résoudre ce problème.

function Person(props){
  return(
    <div class="person">
      <img src='{image_url}' />
      <h2>{props.name}</h2>
      <h4>Your Age : {props.age}</h4>
      <h4>Profession : {props.profession}</h4>
    </div>
  );
}

var app = (
  <div>
    <Person name="Prabhudev Vatnal" age="26" profession="Web Developer" image_url="https://picsum.photos/200/300" />
    <Person name="Puneeth Rajkumar" age="43" profession="Film Actor" />
    <Person name="Dwayne Johnson" age="46" profession="Wrestler" />
  </div>
);

ReactDOM.render(app, document.querySelector('#app'));
.person {
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 2px #ccc;
  padding: 5px;
  margin: 5px;
  width: 200px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
0
Prabhudev Vatnal 20 nov. 2018 à 11:01

3 réponses

Meilleure réponse

Cela devrait faire l'affaire!

Deux changements:

  • a changé <div class="person"> en <div className="person">
  • a changé <img src='{image_url}' /> en <img src={props.image_url} />
function Person(props){
  return(
    <div className="person">
      <img src={props.image_url} />
      <h2>{props.name}</h2>
      <h4>Your Age : {props.age}</h4>
      <h4>Profession : {props.profession}</h4>
    </div>
  );
}

var app = (
  <div>
    <Person name="Prabhudev Vatnal" age="26" profession="Web Developer" image_url="https://picsum.photos/200/300" />
    <Person name="Puneeth Rajkumar" age="43" profession="Film Actor" />
    <Person name="Dwayne Johnson" age="46" profession="Wrestler" />
  </div>
);

ReactDOM.render(app, document.querySelector('#app'));
.person {
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 2px #ccc;
  padding: 5px;
  margin: 5px;
  width: 200px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
2
Rbar 20 nov. 2018 à 08:21

C'est un problème de syntaxe:

function Person(props){ return( <div class="person"> <img src={props.image_url} /> // <--- {props.image_url} and not '{image_url}' <h2>{props.name}</h2> <h4>Your Age : {props.age}</h4> <h4>Profession : {props.profession}</h4> </div> ); }

2
Meir 20 nov. 2018 à 08:10

Syntaxe correcte pour codeBase ci-dessus:

function Person(props){
  return(
    <div className='person'>
      <img src={image_url} />
      { props ? <h2>{props.name}</h2>
      <h4>Your Age : {props.age}</h4>
      <h4>Profession : {props.profession}</h4> : ''}
    </div>
  );
}
0
Anupam Maurya 22 nov. 2018 à 13:37