Geek Answers Handbook

Unable to display image using React Native with uri

I am doing React Native and trying to just display the image library image at the url. When I run this, all that is shown is the text "React Native", but no image. What am I doing wrong?

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Image, Text, View, } = React; var AwesomeProject = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> React Native </Text> <Image source={{uri: 'http://facebook.imtqy.com/react/img/logo_og.png'}} /> </View> ); } });
+8
source share
4 answers

Try giving the image component a height and width value.

 <Image style= {{ height:50, width: 50 }} >
+27
source 
 flex: 1, width: null, height: null, resizeMode: 'cover',

This style will make the image flexible and cover the entire container.

0
source

On iOS, you cannot receive http requests, only https. Try adding this to your info.plist file in xcode (make sure it is in that order):

 <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSExceptionDomains</key> <dict> <key>example.com</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> <key>NSIncludesSubdomains</key> <true/> </dict> </dict> </dict>
0
source

when we use the image in a responsive native, the image will not expand to fill the space available to it by default, instead we should add a style rule: how big the image should be. If you do not add a style for the image with height and width, you cannot see the image

0
source

More articles:


All Articles