Load a local image after loading a remote image failed

Question

Is it possible to load a local image if the remote image failed?

For example, I have the following code:

<Image style={ styles.userImage }
       source={ { uri: http://example.com/my_image.jpg } }
       onError={(error) => ...}
/>

In case for example I don't have the rights to access http://example.com/my_image.jpg, I'll get an error in onError. Is there a way then to load a local image instead?

Answer 1

Use component' state. In your constructor set initial url:

 this.state = { image: { uri: 'http://example.com/my_image.jpg' } }

Create onError handler:

 onError(error){
   this.setState({ image: require('your_local_image.path')})
 }

And then combine it all together:

 <Image style={ styles.userImage }
       source={ this.state.image }
       onError={ this.onError.bind(this) }
 />

Answer 2

As per the latest docs you can use defaultSource property. It shows the image till the original image loads, if the load fails the default image is shown Link to docs