Reputation: 1119

Can't show Image in React Native

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.

Upvotes: 57

Answers (21)

Sourabh Gera

Reputation: 1006

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

Upvotes: -2

Jonathan Stellwag

Reputation: 4287

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:

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

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

Upvotes: 71

Adam Maloney

Reputation: 537

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.

Upvotes: 0

jmgregory

Reputation: 90

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

Upvotes: -1

chenop

Reputation: 5153

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.

Upvotes: 0

Gimnath

Reputation: 1078

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

Upvotes: 0

Praise

Reputation: 328

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>

Upvotes: 3

Abhishek Verma

Reputation: 21

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

Upvotes: 2

Huzaifa

Reputation: 355

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

Upvotes: 0

Aneeq Ahmad

Reputation: 61

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

Upvotes: 0

Lintang Wisesa

Reputation: 647

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

Upvotes: 3

Overcomer

Reputation: 464

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

Upvotes: 0

Soban Arshad

Reputation: 1411

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

Upvotes: 9

kevincoleman

Reputation: 493

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

Upvotes: 4

Nika Tsogiaidze

Reputation: 1107

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

Upvotes: 0

amit pandya

Reputation: 1388

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

Upvotes: 1

Murat Çimen

Reputation: 483

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

Upvotes: 2

Belal mazlom

Reputation: 1850

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

Upvotes: 63

Kostiantyn

Reputation: 1853

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

Upvotes: 4

Lucas Bernardo

Reputation: 549

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.

Upvotes: 19

Fredric

Reputation: 1119

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

Upvotes: 14

Can&#39;t show Image in React Native

Answers (21)

Related Questions

Can't show Image in React Native