Can't show Image in React Native

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

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

In addition to Jonathan Stellwag's answer, the 1st solution only works if the URI is using https, or by setting the App Transport Security.

See Can't show Image by URI in React Native iOS Simulator