31

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",

1
  • 1
    I had a similar issue, but it was a syntax error, I had styles={styles.img} instead of style={styles.img} Commented Jul 7, 2019 at 20:20

7 Answers 7

18

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.

12

uri only works with https. In Android it should work fine with either http or https.

You will find further information here.

0
9

Guys there is an issue with Image component is that if first time initialize the component with source={{uri : 'some link'}} it may not work (at least not for me when I fetch image from HTTPS URL from Firebase storage). The trick is you have to trigger a change to source props like first you need to keep source to source={undefined} and then change to source={{uri : 'some link'}}. Hope it would help someone

3
  • I needed this. Do you know why this is happening? I'm assuming a recent update issue with something since this is the first I've seen of needing to do this.
    – Dwigt
    Commented Apr 28, 2022 at 12:54
  • Thanks @Nishain de Silva, can you recommend how to trigger the change to source's prop?
    – djangodev
    Commented Jul 11, 2022 at 21:12
  • for me I initially kept the prop to undefined and then changed the value to a string source Commented Aug 18, 2022 at 5:58
6

Aside issue with HTTPS, make sure you set the width and height of the Image

1

How i make Image source with http or https url work is by resetting the android emulator am using.

You can clear the emulator by opening the android studio then click on tools tab at the top bar select AVD Manager once it open Select the emulator you are using, right click on it then select wipe data. Once that process is completed, open cmd or terminal at the root of your react-native project $ npx react-native run-android

1

I had the same problem. For me I set style, width, height, minWidth, minHeight. Works fine.

2
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Oct 7, 2023 at 4:11
  • This answer means that give style with width and height to image will works fine. Commented Oct 31, 2023 at 3:32
1

I had the same problem for this

<Image
 style={{flex: 1, width: 50, height: 50, resizeMode:'contain'}}
source={{uri: 'example link'}}
/>

Add minHeight and minWidth in the style section to make it render

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.