Как динамически добавить изображение в ReactJS? - PullRequest
Новая
       30

Как динамически добавить изображение в ReactJS?

0 голосов
/ 20 ноября 2018

Я не получаю никакой ошибки, Изображение не отображается, как добавить изображение?Я думаю, что синтаксис, который я использовал, неверен.пожалуйста, разрешите это. 

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>

Ответы [ 3 ]

0 голосов
/ 20 ноября 2018

Это должно сработать!

Два изменения:

  • изменено <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>
0 голосов
/ 22 ноября 2018

Правильный синтаксис для вышеуказанной базы кодов: 

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 голосов
/ 20 ноября 2018

Это проблема синтаксиса:

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

...