15

I'm using react-native 0.28.0

I'm trying to show an image on iPhone simulator according to this tutorial:

Introduction to React Native: Building iOS Apps with JavaScript | Appcoda

var styles = StyleSheet.create({ image: { width: 107, height: 165, padding: 10 } } var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

Then in the render() function, I add this:

<Image style={styles.image} source={{uri:imageURI}} />

The space allocated for the image is there, but the image is not shown.

However, if I use local image instead, the image will be shown.

var Picture = require('./content.jpeg')

In render() function:

<Image source={Picture} style={styles.thumbnail} />

How can I show picture using URI as source?

Improve this question
1
  • Same problem with you, and solved the problem from the answer you accepted, thank you so much. Commented Jul 6, 2016 at 5:54

7 Answers 7

Reset to default
41

The problem is that your are trying to load the image from a http connection and not from a https connection as it is demanded by Apple.

Try if your code works with another uri which uses https instead of http. In Android it should work fine with either http or https.

Read more at https://github.com/facebook/react-native/issues/8520 and WWDC 2016: Apple to require HTTPS encryption on all iOS apps by 2017.

If you really want to load something over http you can edit the info.plist file and add your exception there. More detailed info here: Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11.

See also my StackOverflow question here: React-native loading image over https works while http does not work.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

7

Here is a sample code for Hamburger icon in image-

<Image source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} />

for more info you can refer here-https://facebook.github.io/react-native/docs/image.html

Improve this answer

3 Comments

I tried that sample code, but it doesn't work in my iPhone 6 Simulator (iOS 9.3)
Did u add the Image Component in require?
Thanks, Dlucidone. Actually adding App Transport Security setting in info.plist solves the problem.
3

just edit list.info file at field: "NSAppTransportSecurity" into ios of React Native such as:

<dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> <key>resizing.flixster.com</key> <dict> <!--Include to allow subdomains--> <key>NSIncludesSubdomains</key> <true/> <!--Include to allow HTTP requests--> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> <!--Include to specify minimum TLS version--> <key>NSTemporaryExceptionMinimumTLSVersion</key> <string>TLSv1.1</string> </dict> </dict> </dict>
Improve this answer

Comments

0

I have found a solution from another stack overflow question. Its solved my problem was that a image showed in before but some time its not showing in IoS simulator. Below answer is fixed my problem

React-native iOS not showing images (pods issue)

Thanks @gyan deep

Improve this answer

Comments

0

Here is a solution you can use to solve this issue

  1. go to the info.plist file in your ios project directory
  2. go to the line where u find
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> ...
  1. Add inside this
<key>NSExceptionDomains</key> <dict> <key>{Put Your HTTP Domain Here, example:books.google.com}</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict>
Improve this answer

Comments

-1

Here is a possible way on how to know if your image will be displayed: copy image uri and paste it to you browser (safari, chrome, etc) -> if you do not see your image, then it probably won't displayed by your phone

Improve this answer

Comments

-2

Have you tried wrapping it in uri: ?

<Image source={{uri: imageURI}} style={styles.thumbnail} />
Improve this answer

1 Comment

Yes, I wrapped it in uri as I mentioned in the question. I also tried changing the ordering as your answer shows, but the image still doesn't show.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.