CODEWITHSUNDEEP
androidreactjsimagereact-native
sarah nafees
sarah nafees

Reputation: 39

Can't seem to display image using require or uri on React Native! What am I doing wrong?

I have even tried importing image and require method using react-native and it doesn't work!

This is my code:

import React from 'react';
import { 
    StyleSheet, 
    Text, 
    View,
    TouchableOpacity,
    Button,
    Image
} from 'react-native';



export default class MentePair extends React.Component {
    render(){
        return(
            <Image
                source={{ uri: 'asset:/Capture.png' }}
                style={{ width: 40, height: 40 }}
              />

            </View>

        )
    }
}

Upvotes: 0

Views: 450

Answers (2)

user13142973
user13142973

Reputation: 645

I had tried your code it's working fine when I use require, my code looks like this, check whether you are using correct path of image:

import React from 'react';
import { 
    StyleSheet, 
    Text, 
    View,
    TouchableOpacity,
    Button,
    Image
} from 'react-native';



export default class MentePair extends React.Component {
    render(){
        return(
            <View>
            <Image
                source={require('./assets/main.jpg')} 
                style={{ width: 100, height: 100 }}
              />
            </View>

        )
    }
}

Upvotes: 2

Jalal Haider
Jalal Haider

Reputation: 131

Your code doesn't seems to be using Image Tag you can visit official doc https://reactnative.dev/docs/image Example:

<Image source={require('@expo/snack-static/react-native-logo.png')} />

Upvotes: 0

Related Questions