Как отобразить изображение из API в React Native? - PullRequest
Новая
       9

Как отобразить изображение из API в React Native?

0 голосов
/ 31 октября 2018

Я создаю собственное приложение с использованием crna / expo. Я хочу отобразить изображение, которое уже загружено из API. Поскольку изображение загружено, мне нужно использовать require вместо uri в качестве источника. Но я не смог вызвать изображение, когда я поставил этот код: 

 <Image source={{require('this.state.user.picture')}} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

Также, когда я изменил его на uri, он тоже ничего не показывал .... (не ошибка) 

<Image source={{uri:this.state.user.picture}} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

Может кто-нибудь помочь мне? Большое вам спасибо!

Ответы [ 3 ]

0 голосов
/ 31 октября 2018

Проблема в вашем коде в том, что вы используете двойные фигурные скобки, когда вам нужна только одна пара .

Попробуйте вот так: 

 <Image source={require('this.state.user.picture')} style={{ width: 75, height: 75, borderRadius: 37.5 }} />

Помните, что двойные фигурные скобки - это просто объектный литерал, встроенный в значение prop.

0 голосов
/ 31 октября 2018

Если ваш ответ - изображение типа data, вы должны сделать так: 

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain',
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

изменение uri с помощью this.state.user.picture

0 голосов
/ 31 октября 2018

Я предлагаю изменить тип в соответствии с некоторыми условиями, например.

примечание: требуется указать d локальный путь к изображению, а для URI требуется http ссылка 

let image = {uri:this.state.user.picture}; 

if(something){
 image = require('../../demo.jpg');
}

<Image source={image} style={{ width: 75, height: 75, borderRadius: 37.5 }} />
...