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.
2
Answers
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.
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.