Can't show Image in React Native

Question

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.

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'; — Engin Yilmaz, Mar 11 '22 at 19:35

Jonathan Stellwag · Answer 1 · 2022-04-07T07:52:01.827

69

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

1. HTTPS-Solution:

Your picture is provided by an URI - source={{uri:imageURI}}

Example: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}

Important: Dont forget to set the clip twice: {{}}

2. HTTP-Solution:

If you want http look the following solution - HTTP Github issue

3. Local-Picture

Save: Create a new folder for your images and save them locally there (folder: images)

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 ('../../../')

Use: Use your image in the render function

render() {
  return (
    <Image source={yourPicture}/>
  )
}

The style of your images works as you described

edited Apr 07 '22 at 07:52

answered Jun 30 '16 at 07:18

Jonathan Stellwag

3,843
4
25
50

12

Yes, I did set imageURI and used the double brace {{}} (edited the question) But the picture isn't shown. – Fredric Jun 30 '16 at 15:20
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. – Jonathan Stellwag Jun 30 '16 at 15:23
The second solution works. Thanks! The first solution (getting picture by an URI) doesn't work. – Fredric Jul 01 '16 at 04:09
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. – Jonathan Stellwag Jul 01 '16 at 06:43
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? – Fredric Jul 01 '16 at 07:07

score 61 · Answer 2 · edited Jun 24 '19 at 02:30

61

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

edited Jun 24 '19 at 02:30

Ismail

725
8
23

answered Jul 23 '17 at 19:58

Belal mazlom

1,790
20
25

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? – Pxaml Apr 17 '20 at 01:04

score 16 · Answer 3 · answered Mar 15 '18 at 13:52

16

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.

answered Mar 15 '18 at 13:52

Lucas Bernardo

519
1
4
13

thanks, my image had no height so it was not visible – Dark Matter Oct 24 '22 at 17:59

score 14 · Accepted Answer · edited May 23 '17 at 12:10

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

edited May 23 '17 at 12:10

Community

1
1

answered Jul 02 '16 at 06:47

Fredric

1,089
2
10
19

I had the same issue and added the 's' then it worked! – bstras21 Sep 26 '16 at 15:58

score 9 · Answer 5 · answered Sep 30 '20 at 12:42

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];
  }

score 4 · Answer 6 · answered Jan 05 '19 at 08:01

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

answered Jan 05 '19 at 08:01

Kostiantyn

1,792
2
16
21

score 4 · Answer 7 · answered Sep 18 '20 at 17:45

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. :)

answered Sep 18 '20 at 17:45

kevincoleman

493
3
11

had the same issue on 0.63.1, upgrading to 0.63.2 resolved it – Serg Chernata Sep 23 '20 at 14:27

score 4 · Answer 8 · answered Nov 27 '20 at 09:56

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 }}
/>

Sure. I restarted my android emulator and it works now. Thank you — chidimo, Nov 22 '21 at 13:27

score 2 · Answer 9 · answered Nov 04 '19 at 11:12

2

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

answered Nov 04 '19 at 11:12

Murat Çimen

465
4
8

score 2 · Answer 10 · answered Mar 04 '22 at 19:54

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>

score 1 · Answer 11 · answered Mar 12 '20 at 06:54

1

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

answered Mar 12 '20 at 06:54

amit pandya

1,384
13
22

score 1 · Answer 12 · answered Sep 07 '21 at 14:17

1

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

answered Sep 07 '21 at 14:17

Abhishek Verma

11
2

Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 07 '21 at 14:29
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). – Saranjith Sep 07 '21 at 20:45

score 0 · Answer 13 · answered Sep 03 '20 at 16:58

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

score 0 · Answer 14 · answered Nov 23 '20 at 06:11

0

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

answered Nov 23 '20 at 06:11

Overcomer

434
5
11

Aneeq Ahmad · Answer 15 · 2021-04-03T11:47:34.770

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,

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.

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...

score 0 · Answer 16 · answered May 01 '21 at 20:35

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

answered May 01 '21 at 20:35

Huzaifa

345
4
15

score 0 · Answer 17 · answered Mar 14 '22 at 02:03

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}}
         />

answered Mar 14 '22 at 02:03

Gimnath

824
9
11

score 0 · Answer 18 · answered Mar 23 '22 at 08:20

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.

answered Mar 23 '22 at 08:20

chenop

4,743
4
41
65

score 0 · Answer 19 · answered May 26 '22 at 04:24

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")} />

score 0 · Answer 20 · answered Jun 28 '23 at 17:18

It's working perfectly.

import React from 'react';
import {View, Image, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 150,
    height: 150,
  },
  logo: {
    width: 166,
    height: 1[![enter image description here][1]][1]58,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://picsum.photos/200/300',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
};

export default DisplayAnImage;

score -1 · Answer 21 · answered Feb 19 '22 at 14:42

-1

Can't show Image in React Native

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

answered Feb 19 '22 at 14:42

Sourabh Gera

862
7
7

Can't show Image in React Native

21 Answers21

Linked