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

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

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

20.11.2018 09:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

216

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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> ); }

20.11.2018 09:10

Ответ принят как подходящий

Это должно помочь!

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

поменял <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>

20.11.2018 09:12

Правильный синтаксис для указанной выше 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>
  );
}

22.11.2018 14:37

Другие вопросы по теме

IntelliJ как отключить автоматический {} при написании JSX

Разница между Component {} и Component <Props> {} в реакции / реагировании нативной?

Какой самый простой способ получить входные данные с закругленными углами?

Боковая панель DOM перекрывает панель Navbar, удаляя ее из DOM

Получение значка для отображения в React - тернарное выражение

HoverOn и hoverOff не работают - оператор if - React

Компиляция с помощью npm prod vs devq

Страница со встроенной реакцией не отображается, но ошибок нет

Как сделать динамическое состояние для нескольких полей в React?

Динамически импортировать компонент React, если этот файл существует, в противном случае отображать сообщение по умолчанию

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

Ответы 3

Другие вопросы по теме

Похожие вопросы