javascript - 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
2. The solution: - HTTP-Solution

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