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

【问题标题】：How to add image dynamically in ReactJS?如何在 ReactJS 中动态添加图像？
【发布时间】：2019-04-22 15:16:11
【问题描述】：

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

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>

【问题讨论】：

标签： reactjs jsx react-props

【解决方案1】：

上述代码库的正确语法：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这是一个语法问题：

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

【讨论】：