Image Not Loading in React Tutorial

Question

Does anyone know why the image may not be loading? index.ios.js is below, rest of the code is simply generated from

react-native init TestApp

I am not sure if the opening and closing tags are wrong or what. The image appears to load when I put it into my browser.

    import React, { Component } from 'react';
var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

import {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class TestApp extends Component {
  render() {
    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>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

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

Looks right. Have you tried putting the URI string into the Image tag directly instead of pulling it from the object variable? — Gregg, Jul 24 '17 at 01:42
The image is shown without any problem, see results here at https://snack.expo.io/BkuFE0MI- — David, Jul 24 '17 at 01:59

score 3 · Answer 1 · answered Jul 24 '17 at 02:38

3

Add to your Info.plist

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

answered Jul 24 '17 at 02:38

Kawatare267

4,168
3
16
16

score 2 · Answer 2 · answered Jul 24 '17 at 04:32

The problem is that you are trying to load the image from a http connection and not from a https connection as recommended by apple.

You can fix it by editing info.plist as answered by Kawatare267

You can see more details here

Hope this helps.

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

Image Not Loading in React Tutorial

2 Answers2