[Android] Some image files are not loadable by Image component

[kriskate]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 1.94 GB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.6.0 - /usr/local/bin/node
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.6.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.1, 26.0.3, 28.0.0
        API Levels: 23, 25, 26
    IDEs:
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      react-native-cli: 2.0.1

Tested on

• react-native 0.56 on emulator Android 7.1.1
• Galaxy S8 Android 8.0.0

Description

Some images won't load in component Image.

I've tried the following:

1. prefetch() the image (btw this should probably throw an error if failed)
2. download locally and use as native module - throws exception "Cannot find module - no such file"

The only difference I found between a loadable image and a not-loadable one is their Color profile and Alpha channel definitions:

// not loadable: 
Color profile: -
Alpha channel: no

// loadable:
Color profile: sRGB IEC61966-2.1
Alpha channel: Yes

Reproducible Demo

Here is a snack

[TheRohitSharma]

Encountering the same issue. Any updates?

[kriskate]

My solution was to re-encode the images (with a free online converter, don't remember which though), and re-upload the new version.

[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 "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[Salakar]

👋 hey all, thanks for reporting this issue.

Please, could you confirm if this is still an issue with the latest version of React Native?

Also, I'd suggest that making this issue over at https://github.com/facebook/fresco is probably a better place for this to be; Fresco is used internally by React Native for images on Android.

Thank you