How to add image dynamically in ReactJS?

Question

I'm not getting any error, Image is not displaying, how to add an image? I think syntax I have used is wrong. please resolve this.

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>

Rbar · Accepted Answer · 2018-11-20 08:21:10Z

This should do the trick!

Two Changes:

changed <div class="person"> to <div className="person">
changed <img src='{image_url}' /> to <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>

Meir · Accepted Answer · 2018-11-20 08:10:35Z

2

It is a syntax problem:

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

answered Nov 20, 2018 at 8:10

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Comments

Anupam Maurya · Accepted Answer · 2018-11-22 13:37:44Z

0

Correct syntax for above codeBase:

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

answered Nov 22, 2018 at 13:37

Anupam Maurya

2,2611 gold badge25 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to add image dynamically in ReactJS?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related