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

React native – React-native Image not displaying image with require and local image

I have been trying to solve this issue for the past few days, but when I use <Image source={require("path/image.png")} style={{width:100, height:100}} /> the image will not display on my emulator. I also tried to build the app locally, and it still will not show in the app.

import { Text, StyleSheet, Image, View, TextInput, SafeAreaView, Button, Pressable, Alert } from "react-native";
import * as ImagePicker from "expo-image-picker";
import { useState } from "react";

const UserDetails = () => { 
    const [image, setImage] = useState(null);

    const pickImage = async () => {
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== 'granted') {
            Alert.alert("Permission required", "Permission to access media library is required!");
            return;
        }

        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
        });

        if (!result.canceled) {
            setImage(result.assets[0].uri);
        }
    };  
    
    const onSubmit = () => {
        // Other things
    }
    
    return (
        <SafeAreaView>
            <View>

                <Pressable onPress={pickImage}>
                    <Image source={image ? { uri:image } : require("./../../assets/default_pfp.png")} resizeMode="contain" style={styles.image} />
                </Pressable>

                <Button onPress={onSubmit} title="SUBMIT" />
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    image: {
        width: 100,
        height: 100,
        borderRadius: 50,
    },
});

export default UserDetails;

I have tried to put the image in the directory as "userDetails.js" (which is this current file), but it still doesn’t show up.This is what is displayed when this piece of code is ran: the image loaded is not shown.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have solved this problem with an unorthodox working solution: I am using Firebase and GCS as the backend of my project, hence I have used Firebase Storage to store the picture I was going to display in my project and I used its API to download the URL of the picture, and passed for the URI of Image tag. Since I only had to display a single image from the local store, this solution takes O(1) space within Firebase Storage.


  2. 0

    There’s not enough details to be sure where your issue from, but you can add display flex to the parent views to debug, and also use onError to check your image location.

    <SafeAreaView style={{ flex: 1 }}>
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Pressable onPress={pickImage}>
      <Image
        source={image ? { uri: image } : require("./../../assets/default_pfp.png")}
        resizeMode="contain"
        style={styles.image}
      />
    </Pressable>
    <Button onPress={onSubmit} title="SUBMIT" />
  </View>
</SafeAreaView>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search