Can't show Image in React Native

Question

I'm using react-native 0.28.0

I'm trying to show an image on iPhone simulator according to this tutorial: Introduction to React Native: Building iOS Apps with JavaScript | Appcoda

var styles = StyleSheet.create({ image: {     width: 107,     height: 165,     padding: 10   } }  var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api' 

Then in the render() function, I add this:

<Image style={styles.image} source={{uri:imageURI}} /> 

The space allocated for the image is there, but the image is not shown.

Answer 1

Hope the following solutions can help you - all can be used for Image

1. HTTPS-Solution:

1. Your picture is provided by an URI - source={{uri:imageURI}}
2. Example: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
3. Important: Dont forget to set the clip twice: {{}}

2. HTTP-Solution:

1. If you want http look the following solution - HTTP Github issue

3. Local-Picture

1. Save: Create a new folder for your images and save them locally there (folder: images)
2. Require: Require the picture you saved locally by using the among syntax

var yourPicture = require ('./images/picture.jpg');

• Notation for the same folder ('./')
• Notation for the above folder ('../')
• Notation for more folder above ('../../../')

3. Use: Use your image in the render function

render(){     return(         <Image source={yourPicture}/>     ) } 

The style of your images works as you described

Answer 2

When adding Image tag and use uri you need to check following things:

• Adding width and height style for Image tag:
  ex:
  <Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
  Image doc

• Using HTTP urls: you will need to enable app transport security
  App transport security for iOS

• Using HTTPS urls: it will work normally