react-native: Image from url loads with https but fails loading with http
I am trying to display a simple image from an URL in the iOS Simulator. When the URL is a https domain it works fine but when I try loading from a http domain the image is not loaded. Via the inspector you can see that a blank image was created. My code is the following:
render() { return ( <View> <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} // source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} onLoadStart={() => console.warn('loading started')} onLoad={() => console.warn('loading successful')} onLoadEnd={() => console.warn("loading endet (successful or not")} /> </View> ); }
I already tried:
- Restarting the packager and the iOS simulator (no change)
- Reset Contents and Settings of the iOS simulator (no change)
- Tried several other images via http and https
- Created new project from scratch via
react-native
init myurltestproject` and added code from above (still not working for http images)
I am using:
- react-native-cli: 1.0.0
- react-native: 0.28.0
- macOS 10.10.5 (Yosemite)
- MacBook Pro 13inch early 2015
Side note: Interestingly when I try to run the exact same code on the simulator but via Deco IDE (Version 1.1.2 (0.7.0)) http and https url are working.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 2
- Comments: 16 (4 by maintainers)
Links to this issue
Commits related to this issue
- Modify README.md - http to https - refs: https://github.com/facebook/react-native/issues/8520 — committed to huiseoul/react-native-fit-image by originerd 8 years ago
Our is not working with https in Android. Can you please tell us how was your working on Android?
Any solution for loading the images over http?
@gitlovenotwar You can add a security exception in Info.plist file.
<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>
Reference: https://googleadsdeveloper.blogspot.in/2015/08/handling-app-transport-security-in-ios-9.html
They changed the code of the movie example to use a https url now. See this commit: https://github.com/facebook/react-native/pull/367/commits/b00d4b394f590a3d8365d7a63cf5436c499483ec So now it’s working again also for iOS.
The tutorial is also broken for the IOS simulator, since Rotten tomatoes examples use http