Image not showing on device for React Native movies tutorial on existing application

Question

I'm currently doing the react native movies tutorial (https://facebook.github.io/react-native/docs/tutorial.html), and I am using a device to display the results. I used an existing project, put a view using storyboard, and subclassed it correctly. For some reason, the image is not being displayed, and a red box is being shown instead. Am I doing something wrong? My React code:

'use strict';  
var React = require('react-native');

var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} = React;

var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

var Movies = React.createClass({
  render: function() {
  var movie = MOCKED_MOVIES_DATA[0];
  return (
    <View style={styles.container}>
      <Text>{movie.title}</Text>
      <Text>{movie.year}</Text>
      <Image
        source={{uri: movie.posters.thumbnail}}
        style={styles.thumbnail}
      />
    </View>
  );
}

});

React.AppRegistry.registerComponent('Movies', () => Movies);

This is a screenshot of what is being displayed on my phone:

Answer 1

Just write https instead of http and it will work. But it will only work if the server accepts https. Otherwise change the info.plist file.