Using Image with https

Question

When I run this code (very similar to the code here https://facebook.github.io/react-native/docs/image.html) using the command react-native run-ios the image head_logo.png image does not appear. How can I display this image?

import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

Answer 1

This is because you are using white image and your background is white

simply apply backgroundColor:'#000' to <View>

Answer 2

It does appear, its just white and has transparent background. Try adding a red background to your root <View>

See here in this snack, it works like a charm

https://snack.expo.io/By6iSVCeM

Answer 3

Your Image is appear but Image colour same as your background colour. So it is not showing properly in the view.

So you can give background colour to image or View. So it can be showing properly.

<Image
          style={{width: 50, height: 50, backgroundColor: 'grey', resizeMode: 'center'}}
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
/>