react-native: [Image] Example issue: ImageView not loading image

I am playing with the very basic example from Tutorial.

I wrote following code, just exactly what the tutorial did.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} = React;

var MOCKED_MOVIES_DATA = [
  {title: 'Title of movie', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

var Awesome = 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>
    );
  }
});

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

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

But it turns out that the ImageView did not load the poster correctly. I changed the backgroundColor of Image to red, and I just got a red rectangle without the poster.

I checked the internet connection. I can access the image from Safari Mobile.

And I don’t know if there is any way to debug this app so that I can figure out how to resolve this issue.

Any thoughts?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 43 (12 by maintainers)

Commits related to this issue

ImageView should use https https://github.com/facebook/react-native/issues/289 — committed to chaintng/react-native by chaintng 8 years ago

Most upvoted comments

Changing the URL to HTTPS fixed it for me (and many others). https://i.imgur.com/UePbdph.jpg

+48

abdulsattar on Jun 24, 2016

No need to use underscore: source={{uri: movie.posters.thumbnail.replace('http://', 'https://')}}

ArthurClemens on Jul 5, 2016

Changing HTTP to HTTPS does not work for me

waleedarshad-vf on Aug 10, 2016

Have you tried enable Allow Arbitrary Loads when using HTTP? Hope it will work for you. info.plist -> App Transport Security Settings -> Allow Arbitrary Loads TRUE

liluo-tw on Jul 14, 2016

I’m probably hitting this too. Both in simulator and device. I have a ListView of images and the images won’t load many times. Doing a complete Reset on the Simulator seems to make it work for a while.

paramaggarwal on Apr 26, 2015

I just ran into something similar. I just tried to copy and paste from the first example here: https://facebook.github.io/react-native/docs/image.html#image

I just started a new project and assumed I didn’t have the local file so I deleted the first image and kept only the second image that loads the facebook react logo from uri. This didn’t work and ended up here. I tried the reset content and settings but this still did not work.

After playing around a bit more I discovered this bit of documentation https://facebook.github.io/react-native/docs/images.html#network-images that states that network images must specify size. Copying the example from this section does work.

No idea if it would have been necessary for me to Reset Content and Settings, but there does seem to be some non-working example code.

I would submit a pull request but at the moment github is giving me a 405 error when I attempt to fork the project so I figured I would post the info here for now.

kurtharriger on Apr 5, 2016

All of my images loaded from remote are through https protocol. But some images did not load successfully, and this situation just occured on devices with model iPhone 5(may or below, I’m not able to test with iPhone 4/4s) rather than simulators. I found that all images loaded failed are jpg format. React Native version: 0.35 Device: iOS 10.1 iPhone 5

I tried loading these images with native Objective-C code by SDWebImage(a native framework for loading local/web image), these images loaded successfully. It maybe a bug of React Native?

One of these images can not load url: https://cdn.applysquare.net/storage/tmp/qa/thread/DmMz5AkpU.jpg

joint-song on Oct 31, 2016

Had this issue as well. After that I realized that my images were too huge for the screen (some 500KB each). After reducing the size (to about 1/10th of it), it worked fine.

ling-wong on Dec 21, 2015

@waleedarshad-vf Try to change you Info.plist file just like @CassieLuoli said, however keep in mind that this is not an optimal solution for production. If you want this done the proper way you should check this article

fernando-sendMail on Aug 11, 2016

I had same issue. I doubt that it is the new iOS HTTPS thing is the problem. I tried to change the App Transport Security Settings to Allow Arbitrary Loads to YES and it worked as expected!

flysofast on Jul 2, 2016

Both solutions, modify info.plist or changing url to https, resolved the issue for me. Thanks for the quick response!

hectoroso on Jun 24, 2016

I had this issue, and it was only resolved by replacing

source={{uri: movie.posters.thumbnail}}

with

source={{uri: 'http://i.imgur.com/UePbdph.jpg'}}

baumant on Dec 18, 2015

I am not sure if this is what I am running into but here is my issue. I have a news feed like list view with images, when i add a new item to the feed and refresh it, a lot of the times the new feed item will show with the old image. So I wrapped <Image /> and took over shouldComponentUpdate, I have something like this

componentWillReceiveProps(nextProps) {
        let image = (nextProps.image !== this.state.image) ? `${nextProps.picture}?t=${new Date().getTime()}` : nextProps.picture;

        this.setState({image: image});
    }

    shouldComponentUpdate(nextProps) {
        return (nextProps.picture !== this.props.picture);
    }

This fixes this problem for me on the simulator only, for some reason the device just doesn’t update the image at all. Is this similar or should I create a new issue?

josebalius on Jun 30, 2015

@tjwudi if it is a simulator problem try completely resetting it (as if it were a new iPhone). Reset Content and Settings or something like that I believe.

ide on Mar 27, 2015