[Image] Example issue: ImageView not loading image

[meetwudi]

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?

[vjeux]

Sometimes if you lose internet connection and get it back up, the simulator will get stuck with no internet. Can you try to kill the simulator and rebuild?

[meetwudi]

@vjeux Thanks. I restarted the simulator, rebuild the app but it does not work :( Any approach I can inspect the internet status?

[ide]

@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.

[meetwudi]

@ide Resetting does work, thanks a lot! I wonder how come the issue, though.

[t4t5]

I had the same problem, and was quite confused for many minutes, but solved it by doing "Reset content and settings". Not sure if this is the Simulator's fault or React's, but it should probably be fixed soon in order not to scare new people away, it is after all the very first tutorial in the official docs. :)

[vjeux]

If anyone in this thread has any idea how to solve this problem (not workaround by resetting) that would be awesome

[jaygarcia]

Can one of the repo owners re-open the issue if it's still an issue? ;)

JG

@moduscreate

:: sent from my mobile device ::

On Apr 8, 2015, at 11:01, Christopher Chedeau notifications@github.com wrote:

If anyone in this thread has any idea how to solve this problem (not workaround by resetting) that would be awesome

— Reply to this email directly or view it on GitHub.

[SizeSeeker]

Just experienced the issue. Resetting still works. @t4t5 has a great point about it being a bug in step 2 of the tutorial.

[ReadingSteiner]

Solved by "Reset content and settings".I was wondering if something wrong with the url.

[drkibitz]

Have experienced the same problem on device, but have not looked into it, assumed it might be a problem with caching a failed download.

[paramaggarwal]

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.

[mondras]

Same here

[asamoon]

Same problem on device～

[amccloud]

Same issue. Opening up Charles proxy reveals that no request to the image is being made. Maybe the Image component thinks it has the image cached?

Appending '?t=' + Math.round(new Date().getTime() / 1000) to the uri appears to make the image load but this obviously disables caching.

[asamoon]

How to check <Image /> was finished loading？

[josebalius]

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 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?

[MossP]

Just tidying up old issues. Any update on this @nicklockwood?

[nicklockwood]

Not sure. The imageview component has been rewritten since this was raised, but I don't know if this specific issue has been fixed.

[MossP]

Thanks @nicklockwood. Is this still an issue @tjwudi?

[f15gdsy]

In my case, the image does not show even resetting the simulator but just leave a background color. I'm using react-native 10.0

----- Update! ----- OK, it's my own fault. When I looked at my code after a week or so, I found I had a typo. I wrote the prop 'source' of Image as 'srouce'. It works perfectly when I corrected it. Sorry for any convenience!

[yogurt-island-331]

I had this issue, and all that I needed to do was delete the old styles declaration, maybe in the tutorial we could say something like "replace the old style declaration with the new one" so that users know that a replacement is needed rather than just adding a block of code

[baumant]

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'}}

[ling-wong]

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.

[kurtharriger]

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.

[hectoroso]

I'm having this issue. I copied the Final Source Code from the bottom of the Movie Fetcher sample app (https://facebook.github.io/react-native/docs/sample-application-movies.html) and ran it in the iPhone simulator. The list looks fine, but no images. I've tried both via xcode and the command line. Tried Reset Content and Settings, but no luck.

The image is at line 74,

<Image
  source={{uri: movie.posters.thumbnail}}
  style={styles.thumbnail}
/>

When I replace movie.posters.thumbnail with 'https://facebook.github.io/react/img/logo_og.png', the image displays. However, I tried other hard-coded images, but those didn't work either.

> react-native --version
react-native-cli: 1.0.0
react-native: 0.28.0

[abdulsattar]

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

[hnaoto]

modify Info.plist works for me Reference: https://github.com/facebook/react-native/issues/1563#issuecomment-162721129

[hectoroso]

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

[nikhil38]

Here's one which worked for me 👍 changed the image source uri protocol to HTTPS from HTTP and bingo! var App = React.createClass({ render: function() { var movie = MOCKED_MOVIES_DATA[0]; return (

    );
}

});

[flysofast]

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!

[cpenarrieta]

changing image url to https solves the issue. Also, if you follow up with the rest of the tutorial and fetch the data from the API you will have the same problem too. One way to solve this is to use lodash and replace http with https, like this: source={{uri: _.replace(movie.posters.thumbnail, 'http://', 'https://')}}

[ArthurClemens]

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

[fernando-sendMail]

I'm running into the same issue, if you fetch the image from a website that uses HTTP it fails to fetch the image but once you change it to HTTPS it loads correctly.

[liluo-tw]

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

[ArthurClemens]

That would work temporarily during development - I don't want that setting in a testing/production app.

[waleedarshad-vf]

I am having the same problem in android. any workaround for android?

[waleedarshad-vf]

I have Horizontal ScrollView inside ListView. and some of images are loading and some are not.

[waleedarshad-vf]

Changing HTTP to HTTPS does not work for me

[fernando-sendMail]

@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

[waleedarshad-vf]

@fernando-sendMail I am on android and i don't have Info.plist in android but androidManifest.xml and it has permission already about netWork.

[joint-song]

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

[GingerBear]

I had the same issue using https uri, and specified image size on Android. It's fixed by restart the Android emulator.

[mopilo]

any fix for this issue on android?