React native Question posted in
The official React Native documentation can be found here.

Expo / React Native – Unable to Load Local Images

I’m building a mobile app using Expo/React Native. As of yesterday all instances of < Image > that use images stored locally using require() have stopped displaying. Sometime I see a black cross on a white background, sometimes nothing. All instances of < Image > that load images from a server are still functioning. I have no idea what could have caused the issue – I’ve added no new dependencies etc. – but have tried the following to remedy it.

  • Checking file paths/names
  • Clearing cache and restarting Metro Bundler
  • Checking permissions on the relevant files/directories
  • Assets Configuration in app.json (assetBundlePatterns)
  • Rebuilding project
  • Restarting my machine

The odd thing is, other assets from the same "assets" folder as the images are loading fine (fonts, splash screen, etc.). Also, another developer in the team with an identical environment is unable to replicate the issue.

All suggestions welcome!

Tags:

2

Answers


  1. 0 
    import {View, Image, StyleSheet } from 'react-native';


<View style={styles.container}>
      <Image
        style={styles.img}
        source={require('./path/to/your/image')}
      />
</View>


const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  img: {
    width: 50,
    height: 50,
  }
});

    I hope you follow that format to load the local images in Expo/React Native. You have to provide width & height dimensions to Image styles to view them properly.

    Don’t forget to add the file formats in the image path. Like if you’re image is logo.png, you have to add the path like ./logo.png

    Login or Signup to reply.
  2. 0

    You do not have a code snippet, however here is an example that should help you.

    import {Image} from "react-native";

import {Asset} from "expo-asset"; 

<Image source={Asset.fromModule(require('../assets/logo.png'))} />

    Good luck

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search