CODEWITHSUNDEEP
imageapireact-native
hehe
hehe

Reputation: 93

How to display image from API in React Native?

I am building a react native app using crna/expo. I want to display an image that already uploaded from API. Since the image is uploaded, I need to use require instead of uri as a source. But I failed to call the image when I put this code:

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

Also when I changed it to uri, it didn't show anything either.... (not error tho)

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

Can anyone please help me? Thank you so much!

Upvotes: 2

Views: 17003

Answers (5)

Yeison Reyes
Yeison Reyes

Reputation: 21

Use `` for call images from variables

<Image style={{ width: 50, height: 200 }} 
        source={{ uri: `${item.image}` }} />

Upvotes: 2

Matheus Freitas
Matheus Freitas

Reputation: 1

I was getting the same behavior. Just adding a width and height to the image worked for me.

Upvotes: 0

oma
oma

Reputation: 1894

If your answer is a data type image, you have to do like this: 

// 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==',
  }}
/>

changing the uri with your this.state.user.picture

Upvotes: 2

Stundji
Stundji

Reputation: 864

The problem in your code is that you are using double curly braces, when you only need one pair.

Try like that:

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

Remember that the double curly braces are just an object literal inlined in the prop value.

Upvotes: 0

Jigar
Jigar

Reputation: 1374

what I suggest is that modify type according to some condition for eg.

note: require need d local path of image and uri require http link 

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

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

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

Upvotes: 0

Related Questions