<ImageBackground/> on Android does not render image

[kovkev]

Description

If I run this Snack on Expo on my Android device, it shows the image fine: https://snack.expo.io/@kovek/imagebackground-example

If I run that same code serving from my React 62 packager, with the bundle running on my Android device, the image does not show.

The issue is specifically with this URI: https://c.tile.openstreetmap.org/5/5/12.png (and other configurations of tiles from that server.)

For example, this JPG works fine: http://placekitten.com/300/300 (a kitten) , and this PNG works fine: https://i.dlpng.com/static/png/357627_preview.png (it's a galaxy)

It also didn't show on the Android emulator on Linux

React Native version:

Users-MacBook-Pro-2:Penpalling kevin$ react-native info
info Fetching system and libraries information...
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 1.24 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 13.3.0 - ~/.nvm/versions/node/v13.3.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.1 - ~/.nvm/versions/node/v13.3.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6241897
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Java: 11.0.2 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: ^0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found
Users-MacBook-Pro-2:Penpalling kevin$

Steps To Reproduce

Use with a uri: "https://c.tile.openstreetmap.org/5/5/12.png"

Expected Results

See the image

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@kovek/imagebackground-example

I posted this issue here: https://stackoverflow.com/questions/61583877/react-native-imagebackground-on-android-does-not-render-image

and I believe someone else hit this issue here: https://www.reddit.com/r/reactnative/comments/fvd747/imagebackground_not_showing_image_on_some_devices/

[demmorou]

Try like this

const handleError = (e) => { console.log(e.nativeEvent.error); };

<ImageBackground style={{ width: '100%', height: '100%' }} onError={handleError} source={{ uri: 'https://c.tile.openstreetmap.org/5/5/12.png' }}> </ImageBackground>

to get the error.

[fabOnReact]

your http endpoint is not good

Unexpected HTTP code Response{protocol=h2, code=429, message=, u
rl=https://c.tile.openstreetmap.org/5/5/12.png}

read more at https://stackoverflow.com/questions/46463363/how-to-deal-with-unexpected-http-response-code

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[architch]

I faced similar issue where image was NOT displayed on release versions whereas it was displayed on DEBUG mode(emulator)
Figured out that http url did not work in release mode hence started using https url which worked like a charm at both the places.

[xskipy]

This is an old issue but I'll add my solution
I had source={{url: "…"}} instead of source={{uri:"…"}}
for some reason iOS doesn’t mind url but android needs uri