Как получить изображение в реакции от API?

Question

Я получаю изображение из API nodejs после проверки с помощью токена JWT. Я получаю ответ GET 200 ok в браузере. Заголовок сети и изображение можно увидеть в Preview, но я не могу использовать его в своем приложении.

Я, конечно, делаю что-то не так. Пожалуйста, дайте мне знать правильный способ отображения изображения из API. На моем бэкэнд-узле я использую res.sendFile для отправки файла.

class Card extends Component {
 constructor({props, pic, token}) {
super(props, pic, token);
this.state = { 
  pic: pic,
};

urlFetch(data) {
 fetch(data, { 
 headers: new Headers({
 'authorization': `Bearer ${this.props.token}`, 
 'Content-Type': 'application/json'
 })
})
.then(response => {
 if (response.statusText === 'OK') {
  return data   // OR return response.url
  }
 })
}

render() {
const { pic } = this.state;

 return (
        <div>
          <img style={{width: 175, height: 175}} className='tc br3' alt='none' src={ this.urlFetch(pic) } />
        </div>
       );
      }
     }

Answer 1

Я нашел ответ. Вот оно:

Работа с Fetch API - Google docs

Answer 2

Это мой проверенный метод получения данных, есть причина, связанная с обещаниями, я не могу объяснить, что вам нужна вторая функция .then:

componentDidMount(){
    fetch('https://www.yoursite.com/api/etc', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then((response) => {
      return response.text();
    })
    .then((data) => {
      console.log( JSON.parse(data) )
      this.setState{( pic: JSON.parse(data) )}
    })
}

Тогда в вашем img

src={ this.state.pic }