Reactjs avatar src из API

Я пытаюсь отобразить аватар в модальном окне, У меня есть URL-адрес аватара в моем состоянии:

this.state.example.fields.assignee.avatarUrls.48x48

<div>
   <img src='this.state.example.fields.assignee.avatarUrls.48x48'></img>
</div>

Изображение не появляется, я пробовал с {{}}, ``, ...

не должно быть <img src = {this.state.example.fields.assignee.avatarUrls.48x48.png‌​}>?

Evgeny Timoshenko 29.05.2018 10:40

48x48.png - имя файла или свойства?

Evgeny Timoshenko 29.05.2018 10:41

Вопрос не прояснен. Попробуйте привести примерный пример. Кстати, поделитесь своим this.state

Ritwick Dey 29.05.2018 10:44

@ Евгений Тимошенко, вот в чем проблема! 48х48 это свойство!

zemmsoares 29.05.2018 10:45

@RitwickDey, в моем штате много другой информации, и я старался сделать ее как можно проще! Soo на моем состоянии this.state.example.fields.assignee.avatarUrls.48x48 у меня есть эта ссылка https://www.shareicon.net/data/48x48/2015/09/18/103157_man_5‌​12x512.png

zemmsoares 29.05.2018 10:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
5
812
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы должны правильно передать значение src и правильно получить доступ к полю 48x48:

<img src = {this.state.example.fields.assignee.avatarUrls['48x48']} />

Вот действительно простой пример показа изображения:

class Image extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      imageURL: {
        '48x48': 'https://images.pexels.com/photos/735811/pexels-photo-735811.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
      }
    }
  }
  
  render() {
    return <img src = {this.state.imageURL['48x48']} width='500' />
  }
}

ReactDOM.render(
  <Image />,
  document.getElementById('container')
);
<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 = "container">
    <!-- This element's contents will be replaced with your component. -->
</div>

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