React Native Image not rendering from local address on android

Question

I'm learning and doing a project on react-native. I am having problems in trying to render images from the local server. I figured out the way to render images, the problem I am facing is that the image from the local server does not render in my app. The link I added to the uri in source shows image in browser but does not render it in the app. I don't know where I am going wrong

I've tried checking if the link works or not, I used placeholder images to check if Image was working properly (it is).

 <Image source={{uri: 'http://10.0.2.2:8000/packageImages/asd1.jpg'}}
                       style={{width: 400, height: 400}} />

I expected the image to render but it does not render, nor does it throw any error.

Are you sure is this your local ip `http://10.0.2.2:8000/` ? Because local network ip start from `192.168.x.x`.If you sure just ping on your cmd or terminal using `ping 10.0.2.2` check the response.Target the path with directory instead of url link — prasanth, Aug 20 '19 at 18:19
Server IP from the emulator. I can access the PC server from the address — Kishor Shrestha, Aug 20 '19 at 18:22
No such error in react native terminal as well, It just a blank image — Kishor Shrestha, Aug 20 '19 at 18:25
Are you try some diff image like https://facebook.github.io/react-native/img/tiny_logo.png .is it working ? — prasanth, Aug 20 '19 at 18:26
Yes, external images are working. But, the development server ones are not working. The dev server uri works in the browser though — Kishor Shrestha, Aug 20 '19 at 18:27

score 1 · Answer 1 · answered Aug 20 '19 at 18:30

1

If you do truly want the IP assigned to your emulator:

adb shell
ifconfig eth0

Which will give you something like:

eth0: ip 10.0.2.15 mask 255.255.255.0 flags [up broadcast running multicast]

How to get the Android Emulator's IP address?

answered Aug 20 '19 at 18:30

Faizan Shah

123
10

It says no such device – Kishor Shrestha Aug 20 '19 at 18:33
try wlan0 instead of eth0 – Faizan Shah Aug 20 '19 at 18:35

score 0 · Answer 2 · answered Aug 20 '19 at 18:34

0

Sometimes I couldn't render images without SSL encription, can you try using some image from internet with one? You can also try this approach to check if there is some kind of error in your image:

class CustomImage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            source: this.props.source
        }
    }



    shouldComponentUpdate(prevProps, prevState) {
        if (this.state.source !== prevState.source) return true

        return false
    }

    handleImageError = (error) => {

        if (this.props.semImagem) {
            this.setState({
                source: this.props.semImagem
            })
        } else {
            this.setState({
                source: resources.images.livroSemCapa
            })
        }

    }

    render() {

        let theSource = this.state.source

        if (this.state.source ?.uri === null || this.state.source ?.uri ?.trim() === "") {

            theSource = this.props.semImagem ? this.props.semImagem : resources.images.livroSemCapa
        }


        return (
            <Image
                onError={({ nativeEvent: { error } }) => this.handleImageError(error)}
                source={theSource}
                style={this.props.style}
                resizeMode={this.props.resizeMode || 'contain'}
            />
        )
    }
}

answered Aug 20 '19 at 18:34

André Pinto

104
5

Sir, it seems the error says that there is an unexpected end of stream for the image uri. What can I do to fix this?Any suggestions? – Kishor Shrestha Aug 20 '19 at 18:39
It looks like some error on your URI, did you try to get some with SSL?(HTTPS) – André Pinto Aug 20 '19 at 18:45
I'm developing the app locally, so there is no HTTPS. The image uri works fine in the android browser. – Kishor Shrestha Aug 20 '19 at 18:50
Which android API are you using? also, check [this](https://github.com/facebook/react-native/issues/24361#issuecomment-481027977) – André Pinto Aug 20 '19 at 18:52
It is a laravel api – Kishor Shrestha Aug 20 '19 at 18:59
I'm sorry, I should've say the android version you are using, for instance, Android API 29 which is PIE, doesn't accept image without SSL encryption with react-native, I can't say outside it though. – André Pinto Aug 20 '19 at 19:11

React Native Image not rendering from local address on android

2 Answers2