React native bug image shows blank

Question

I have a simple react-native application that loads images in a component. The component uses the standard Image component.

 <Image source={this.state.ImageSource} style={styles.image} />

I have the following code that initializes ImageSource.

componentDidMount() {
    this.setState({ImageSource: {uri: this.props.imageurl}});
}

Image source is an object with uri, e.g., { uri: 'http://localip:123/controller/imageaction/imageid'}.

Images that are less that 1MB in size load without problems. Images that are 1MB or more seem to have issues where they render as a blank image for seeminly forever.

I tried using package react-native-image-progress, and it has the same behavior, similarly failing for bigger images where the loading indicator keeps showing...

I am testing on a slow lower-end LG dumb smart-phone with Android 4.1.2. But in Google Chrome browser, this very phone is able to show large and small images without a problem.

I tried to fix this using android:largeHeap="true" but that didn't cause any change in behavior. Shrinking images makes them able to load, but I need to display big images as well as small.

Thanks for any help.

Ganesh Kanna · Accepted Answer · 2016-11-30 12:29:46Z

2

Can you try this

componentDidMount() {
  this.setState({ImageSource:this.props.imageurl});
}

<Image source={{uri: this.state.ImageSource}} style={{width: 400, height: 400}}/>

answered Nov 30, 2016 at 12:29

Ganesh Kanna

2,2951 gold badge19 silver badges29 bronze badges

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

2 Comments

Lzh Over a year ago

Hi Ganesh, thanks for your reply. I tried many combinations for setting the source, including hard-coded URIs for testing, and the problem still happened. I'm sure that it's not because of the way I'm settings source. The styles.image object also contains width and height.

Ganesh Kanna Over a year ago

facebook.github.io/react-native/docs/image.html try to replicate the same by using the url. And then modify the code base on ur requirement. If this works it means there is no problem in ur code. Or share the url I will try to load in my sample.

Collectives™ on Stack Overflow

React native bug image shows blank

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related