57

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.

Improve this question
1
  • In my case everything was normal only I imported the image from react-native-elements instead of react-native so that it doesn't show up. Did you correctly imported Image from react-native like so? import {Image} from 'react-native'; Commented Mar 11, 2022 at 19:35

21 Answers 21

Reset to default
71

Hope the following solutions can help you - all can be used for Image

1. HTTPS-Solution:

  1. Your picture is provided by an URI - source={{uri:imageURI}}
  2. Example: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
  3. Important: Dont forget to set the clip twice: {{}}

2. HTTP-Solution:

  1. There is a Stackoverflow question/answer to HTTP connections: Stackoverflow - HTTP

3. Local-Picture

  1. Save - Create a new folder for your images and save them locally there (folder: images)
  2. Require - Require the picture you saved locally by using the among syntax
var yourPicture = require ('./images/picture.jpg');`
  • Notation for the same folder ('./')
  • Notation for the above folder ('../')
  • Notation for more folder above ('../../../')
  1. Use - Use your image in the render function
render() { return ( <Image source={yourPicture}/> ) }

The style of your images works as you described

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

5 Comments

Yes, I did set imageURI and used the double brace {{}} (edited the question) But the picture isn't shown.
If there is no more solution up to tomorrow i will look for it again. But i thought this would have been the solution - I will test it and give feedback to you.
The second solution works. Thanks! The first solution (getting picture by an URI) doesn't work.
Hey :) I´m glad the 2nd solution works for you. I now tested out the 1. solution and it works pretty fine at my app. 2 things you could check if u want to use it: 1. Make sure internet connection is available. 2. Completely delete the app from your device and restart it - maybe its a cache problem.
Thanks for the suggestion. I did as you suggested, 1. The internet is available. 2. Done. But the image doesn't show. Is there possibly any permission in the Xcode project to show image from the internet?
63

When adding Image tag and use uri you need to check following things:

  • Adding width and height style for Image tag:
    ex:
    <Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}} />
    Image doc

  • Using HTTP urls: you will need to enable app transport security
    App transport security for iOS

  • Using HTTPS urls: it will work normally

Improve this answer

2 Comments

IM using https and none of my remote images are not showing on test flight . but they show on my local deployments. I don't know why. any help?
make sure its style and not styles. style={styles.myImageStyles} instead of styles={styles.myImageStyles} took me way too long to debug this
19

To anyone getting here, if the accepted answer didn't work for you, make sure your image has proper styling. For uri imported images, you'll need to set both height and width.

Improve this answer

2 Comments

thanks, my image had no height so it was not visible
This is correct, and if you don't want to apply a fixed height you can set the width to 100% and use an aspect ratio like 2/1
14

In addition to Jonathan Stellwag's answer, the 1st solution only works if the URI is using https, or by setting the App Transport Security.

See Can't show Image by URI in React Native iOS Simulator

Improve this answer

1 Comment

I had the same issue and added the 's' then it worked!
9

After updating IOS 14.x it is an issue being generated that image is not being shown. Here is some info against that.

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

 if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; } else { [super displayLayer:layer]; }
Improve this answer

Comments

4

My issue was in path. react-native-fs returns path like /storage/emulated/0/Android/data/com.blah/blah.jpeg but Image components requires it to be file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

Improve this answer

Comments

4

Side note on this issue. Upgrading from React Native 0.63.0 to 0.63.2 fixes an issue where remote images do not display on iOS 14 on device. I found this thread while searching for answers on it, so thought it might help anyone else in the same boat. Just upgrade. :)

Improve this answer

1 Comment

had the same issue on 0.63.1, upgrading to 0.63.2 resolved it
3

I've just experienced this also, can't show <Image> from url source. The problem was occured because I activate the Android emulator (Android Studio AVD), without connect to the internet. So the solution also quite simple, connect to the internet then activate Android emulator & run react native application, and voila... The image from url has shown perfectly.

<Image source = {{ uri: 'https://your_image_from_url.png' }} style = {{ height: 50, width: 50 }} />
Improve this answer

1 Comment

Sure. I restarted my android emulator and it works now. Thank you
3

If you don't want to force to https, I tried modifying this section in my ios/{app}/Info.plist and it resolved the issue.

<key>NSAppTransportSecurity</key> <dict> <!-- Added this line --> <key>NSAllowsArbitraryLoads</key> <true/> <!-- END --> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>
Improve this answer

Comments

2

If you are using RN 6.x> , you can try loading files over https.

Improve this answer

Comments

2

Also make sure your testing device internet is working otherwise it'll show white image instead of giving any errors.

Improve this answer

2 Comments

Please add further details to expand on your answer, such as working code or documentation citations.
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker.
1

I have uninstalled the previously installed app and it started working.

Improve this answer

Comments

0

The issue I had coming from web was the uri parameter which I thought was url

Incorrect: <Image style={styles.image} source={ { url: product.image } }/>

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

Plus you have to set width and height to the image element

It took me a while to figure out

Improve this answer

Comments

0

Setting backgroundColor in styles screwed things up for me in iOS simulator. Instead of loading the image, it showed the color.

Improve this answer

Comments

0

Well basically I had this same issue on my Android phone, basically Image was not displaying at all. I tried all the solutions and was thinking why its not displaying the image. Even the same code for displaying the image on another screen was working, so I closed the application and reinstall the app on android phone. That also didn't worked. Sometimes Android Cache system is the culprit. So, what I did is,

  1. 1st Solution

I go to the Apps in Android settings & Force Stopped the application. And I again restarted the application. It started displaying some images, but not all. So, I jumped to 2nd solution.

  1. 2nd Solution

If you tried all the steps, and still react native's Image package not working, then install react-native-fast-image library. For more details, React Native Fast Image Library...

Improve this answer

Comments

0

For me, I was not paying attention to the image style. I was using maxHeight and maxWidth instead of simple height and width. Hope that helps somebody

Improve this answer

Comments

0

Try giving a height to the <Image/> tag.

 <Image source={{ uri: 'https://i.ibb.co/qF8qRnK/upload-1.png, }} resizeMode='cover' style={{height:100, width:100}} />
Improve this answer

Comments

0

My issue was trying to display gif in Android. In this case you need to add support in build.gradle

Check this link - note the RN version you are using.

Improve this answer

Comments

0

My issue was that I was hosting the image on a local development server via http, neither Android or iOS devices liked that, so I ran it through ngrok which exposed a temporary https route. Obviously the production server will be https.

Improve this answer

Comments

-1

In my case, the issue was that my images were in a path that contained spaces. I can't find it documented anywhere, but when I renamed my subfolder from social icons/ to social-icons/ and updated the <Image source=... accordingly, it started working.

Broken:

<Image source={require("./img/social icons/rounded/facebook.png")} />

Working:

<Image source={require("./img/social-icons/rounded/facebook.png")} />
Improve this answer

Comments

-2

Temporary Solution: Debug your application in real devices show an image using URL

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.