Snack does not display remote images

Expo Development Tools
1

Hello! I wanted to create a test case for a bug using snack, however it seems I can’t get images to work at all with it.

https://snack.expo.io/B144xdLiZ

I tried:

  1. On my android 7 phone via expo app
  2. In the snack preview system - both android and iOS
  3. I changed to url to wikimedia image to make sure it’s not about hotlinking
  4. Retried, image still not there.

Thank you for help

2

Hi! I have a working example of an image in a Snack here:

I’d like to tell you why your example didn’t work:

From the React Native documentation: http://facebook.github.io/react-native/releases/0.48/docs/images.html#images

Network Images
Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image. It’s highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

So with that being said, here is an example of what doesn’t work and what does work:

// GOOD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

I hope this clears things up for you! Best of luck and thank you for using Expo :slight_smile:

1 Like
3

Should’ve read docs more carefully! Thank you

1 Like
4

No worries! Happens all the time :slight_smile: