Fredric Sanjaya Fredric Sanjaya - 5 months ago 90
iOS Question

Can't show Image in React Native

I'm using react-native 0.28.0

I'm trying to show an image on iPhone simulator according to this tutorial: http://www.appcoda.com/react-native-introduction/

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

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

  1. get your picture by an URI: source={{uri:imageURI}} you need to set for imageURI your uploaded picture

-> example: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}

Dont forgett to set the clip twice: {{}}

  1. get your picture by a local require:

Step 1: Safe your picture locally in your project folder and create a new folder for your images (folder: images)

Step 2 "Require" the picture you saved locally:

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

Require hint: ('./') this notation is for the same folder. ('../') with this notation you can navigate one folder above (you can repeat this: '../../../')

Step 3 "Use" the picture at your render

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

The style of your images works as you described