0

I'm using the normal image tag to display server image but some images are showing properly and some are not.

  • I'm using react-native to for android application
  • I have used react-native-responsive-dimensions for image sizing relative to screen size.
  • Passed image URL through a state.

<View>
   <Image 
     style={{borderWidth:1,
     width: responsiveWidth(100),
     height: responsiveHeight(50),
     resizeMode:'contain'}} 
     source = {{ uri:this.state.productimage}}/>
</View>

this is how my product image is looking like

MLavoie
  • 9,671
  • 41
  • 36
  • 56
Divyesh Vasoya
  • 39
  • 1
  • 3
  • for remote images width and height needs to be provided. – Inus Saha Jun 22 '18 at 10:23
  • Can you please share the code? so that we will able to understand how multiple images you have used and can we know the platform for which issue replicating(i.e.android or ios)? – Sandy..... Jun 22 '18 at 17:38
  • borderWidth was causing the issue. after removing borderWidth from CSS of an image tag image is showing properly. sorry and thank you for help. – Divyesh Vasoya Jun 23 '18 at 06:50

2 Answers2

1

if you want to display your server image in grid then may be this works for you

<Image source={{uri:"http://pngimg.com/uploads/google/google_PNG19632.png"}} style={{height:null,width:null,flex:0.5,resizeMode:'contain'}}  />

or change resizeMode:'cover'

chetan godiya
  • 286
  • 2
  • 13
0

provide height-width in style of image tag

<Image 
source = {{ uri:"http://pngimg.com/uploads/google/google_PNG19632.png" }} 
style = {{ height:100, width:100 }}/>
Mojtaba Moshfeghi far
  • 571
  • 1
  • 5
  • 20
Yash Vaghela
  • 562
  • 1
  • 5
  • 16