How to use variable as image source

Question

I'm creating this Instagram Clone, I have the image local url and I want to show it to the user before he posts it.

I tried to crate a state var, tried to require but nothing works

<Image source={this.state.img_url} />

This is what I need, thanks for helping me!

Plenty of questions: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — epascarello, Apr 23 '19 at 01:53

score 1 · Accepted Answer · answered Apr 23 '19 at 02:04

Here is the solution I found

    render(){
        //Getting image from Camera Screen
        var imgSource = this.state.img_url;
        return(
            <View>
                <Image
                    source={{ uri: imgSource }}
                    style={{width: 400, height: 400}} 
                />
            </View>
        );
    }

score 1 · Answer 2 · answered Apr 23 '19 at 11:38

1

For showing image in react-native, you need to provide an object which contains uri property. Below code will set a responsive image

<View>
    <Image source={{ uri: 'image-path' }} style={{ height: 300, flex: 1, width: null }}>
</View>

answered Apr 23 '19 at 11:38

ashish pandey

985
7
14

How to use variable as image source

2 Answers2