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
– prasanth, Commented Aug 20, 2019 at 18:19
Server IP from the emulator. I can access the PC server from the address — Kishor Shrestha
– Kishor Shrestha, Commented Aug 20, 2019 at 18:22
No such error in react native terminal as well, It just a blank image — Kishor Shrestha
– Kishor Shrestha, Commented Aug 20, 2019 at 18:25
Are you try some diff image like facebook.github.io/react-native/img/tiny_logo.png .is it working ? — prasanth
– prasanth, Commented Aug 20, 2019 at 18:26

Faizan Shah · Accepted Answer · 2019-08-20 18:30:31Z

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, 2019 at 18:30

Faizan Shah

14310 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kishor Shrestha Over a year ago

It says no such device

Faizan Shah Over a year ago

try wlan0 instead of eth0

André Pinto · Accepted Answer · 2019-08-20 18:34:38Z

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, 2019 at 18:34

André Pinto

1045 bronze badges

6 Comments

Kishor Shrestha Over a year ago

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?

André Pinto Over a year ago

It looks like some error on your URI, did you try to get some with SSL?(HTTPS)

Kishor Shrestha Over a year ago

I'm developing the app locally, so there is no HTTPS. The image uri works fine in the android browser.

André Pinto Over a year ago

Which android API are you using? also, check this

Kishor Shrestha Over a year ago

It is a laravel api

|

Collectives™ on Stack Overflow

React Native Image not rendering from local address on android

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related