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: http://www.appcoda.com/react-native-introduction/

Answer 1

After updating IOS 14.x it is an issue being generated that image is not being shown. Here is some info against that.

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

 if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Answer 2

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

Answer 3

Setting backgroundColor in styles screwed things up for me in iOS simulator. Instead of loading the image, it showed the color.

Answer 4

I had exactly the same problem and my solve was to set what you've got as var styles = ... to const styles = ... and that's it this solved my problem.

Answer 5

If you are using RN 6.x> , you can try loading files over https.

Answer 6

I've just experienced this also, can't show <Image> from url source. The problem was occured because I activate the Android emulator (Android Studio AVD), without connect to the internet. So the solution also quite simple, connect to the internet then activate Android emulator & run react native application, and voila... The image from url has shown perfectly.

<Image 
   source = {{ uri: 'https://your_image_from_url.png' }}
   style = {{ height: 50, width: 50 }}
/>