react-native: [Android] Images are not showing using local assets or remote image.

React Native version: React Native Environment Info: System: OS: Windows 10 CPU: (8) x64 Intel® Core™ i5-8300H CPU @ 2.30GHz Memory: 7.54 GB / 15.85 GB Binaries: Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Steps To Reproduce

Here’s the code Poster.js

const Poster = ({ imageURL }) => {
  const { width } = Dimensions.get("window");
  console.log(imageURL);
  return (
    <View style={{ padding: 5 }}>
      <Image
        source={imageURL}
        style={{
          width: Math.floor(width / 2 - 30),
          height: 300,
          flex: 1,
          borderRadius: 10,
        }}
      />
    </View>
  );
};

It’s being called from here. MovieGrid.js

....
     <View style={movieGrid}>
          <Poster imageURL={require("../images/image.jpg")} />
          <Poster imageURL={require("../images/1.jpg")} />
          <Poster imageURL={require("../images/2.jpg")} />
        </View>
      </View>
....

When I run the same app in the browser using Expo it works fine but when I run it on an emulator or a physical device it doesn’t show the images. In the Web Browser

Screenshot (79)

On Emulator

Capture_

Also require('../images/image.jpg') returns a number

Capture

Working with images is such a pain 😥 Thank you for your time.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 11
Comments: 26

Most upvoted comments

Same thing, none of my emulators are showing images, regardless if they are local or remote. All of my images in both dev and prod are sent via HTTPS. They are not showing in my debug APKs or my release APKs. I have tried various Android emulators: 7, 8 and 9. iOS is working just fine, as usual.

“react”: “16.6.3”, “react-native”: “0.59.10”

Update

After running Android Studio and reviewing the logcat output I discovered a warning: “Dependency ‘:native-imagetranscoder’”

This lead me to: https://github.com/facebook/fresco

And in my android/app/build.gradle file I added…

This: “implementation ‘com.facebook.fresco:fresco:2.0.0’”

If you are using GIF’s you will also need need…

This: “implementation ‘com.facebook.fresco:animated-gif:2.0.0’”

And just like that my images are back…

+14

wincod75 on Nov 20, 2019

This is still an issue, none of my local image assets are visible, but every image is visible on iOS, this is really weird.

+12

theartificialguy on Nov 22, 2022

I had the same issue and in my case, the solution was to give the image a default styling and resize mode.

 <Image resizeMode="cover" style={styles.image} />


const styles = Stylesheet.create({
  image: {
     width: '100%',
     height: '100%'
  }
})

+12

eltongonc on Apr 17, 2021

I had something similar, until I found out, that I had “url” instead of “uri” as the source object passed to the image. It was working fine on ios, so I didn’t even think about it. Hope that helps somebody else!

marcelschulze on Nov 23, 2019

It still need attention.

rochapablo on Nov 6, 2019

I had the same problem, found out that internet was not working on my Android device… I restarted the device and the image showed up normally… I hope that helps someone along the way.

AyoubXwire on Mar 20, 2020

Same problem here, although I find that if I put the app in the background and then re-open it, the images show. Anyone else find that?

jasonbodily on Apr 2, 2020

FYI: I down-graded my react-native-svg package from ‘10.0.0’ to "react-native-svg": "9.5.3" & that seemed to clear it. Images coming through now. I know this is slightly diff from other situations on here, but this may help someone 🤟🏻

DavidAPears on Jan 13, 2020

Might not be related, but in my release build configs, I had minify and Shrink Resources, which made all files turn black:

buildTypes {
  release {
    singingConfig signingConfigs.release
  
    // commenting out below because they break assets on android release

    // minifyEnabled true
    // shrinkResources true
  }
}

karltaylor on Jul 2, 2019

I currently have this issue too. My images appear fine on a fresh react-native init app when running on android in debug and release mode.

However in my current application, images and assets appear fine in debug but do not appear in release.

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
      Memory: 1.28 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.2.1 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.3 => 16.8.6
      react-native: ^0.59.8 => 0.59.9
    npmGlobalPackages:
      react-native-cli: 2.0.1

karltaylor on Jun 26, 2019