React Native Image Not Working with specific URL

Question

I have the following code below, where the Image component encompasses two Image component.

  <View style={styles.container} >
    <Image
      style={{width: 50, height: 50}}
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
    />
          <Image
      style={{width: 50, height: 50}}
      source={{uri: 'http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png'}}
    />
  </View>

For the first github URL it renders the img logo correctly as expected. However for the second Image it doesn't render the source: qw_neverdonejoggers_p_.png

Which leads me to the conclusion that something wrong URL, however clicking on the URL correctly load the Img:

http://lghttp.24811.nexcesscdn.net/80B00B/qpb/media/catalog/product/cache/11/image/439x334/9df78eab33525d08d6e5fb8d27136e95/q/w/qw_neverdonejoggers_p_.png

I attempted to replicate the issue here, https://rnplay.org/apps/_dQXXw but it renders both the images properly.

So its only on the local my computer that for some reason I can render second image ?

Using: "react": "15.4.1", "react-native": "^0.39.2",

I had a similar issue, but it was a syntax error, I had styles={styles.img} instead of style={styles.img} — Bruce Seymour

martinarroyo martinarroyo · Accepted Answer · 2017-01-02T22:06:28

Andrés' answer is somewhat correct, but it does not address the exact cause of the problem, and that is iOS' App Transport Security. iOS does not allow plaintext requests (http) by default, and so you need to define a 'whitelist' of URLs that can be allowed to override this particular protection mechanism. You have that list already set up so that your app can connect to localhost during development,, so just add new entries to it. You can see how to do so in this answer. Of course, this only works if you know the list of URLs in advance, which might not suit your needs. In that case, have a look at this article.

React Native Image Not Working with specific URL

3 Answers