如何在ReactJS中动态添加图像？

Question

我没有任何错误，图片未显示，如何添加图片？我认为我使用的语法是错误的。请解决此问题。

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>

Answer 1

这是一个语法问题：

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

Answer 2

这应该可以解决问题！

两项更改：

• 将<div class="person">更改为<div className="person">
• 将<img src='{image_url}' />更改为<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>

Answer 3

上面代码库的正确语法：

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