CODEWITHSUNDEEP
javascriptreact-nativeexpo
Ben
Ben

Reputation: 371

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.

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!

Upvotes: 1

Views: 2039

Answers (3)

BearCoding
BearCoding

Reputation: 16

If you’re dealing with missing images in your Expo app, combining the first and second answers might help you debug the issue. This example utilizes the expo-image and expo-asset modules.

Code Example: Here’s how you can display an image using the expo-image and expo-asset packages:

import { Image } from "expo-image";
import { Asset } from "expo-asset";

<Image
  style={{ width: 50, height: 50 }}
  source={Asset.fromModule(require(`@/assets/images/banner.png`))}
/>;

Important Note: Make sure to provide the correct path to your images folder inside the require statement.

Configuration for Latest Expo Versions If you’re using the latest Expo versions, don’t forget to configure the expo-asset plugin in your app.json or app.config.js file. Here’s an example:

{
  "expo": {
    "plugins": [
      [
        "expo-asset",
        {
          "assets": ["./assets/images"]
        }
      ]
    ]
  }
}

Upvotes: 0

Kwekuq
Kwekuq

Reputation: 133

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

Upvotes: 0

Mian Aamir Shehzad
Mian Aamir Shehzad

Reputation: 228

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

Upvotes: 0

Related Questions