Laden Sie ein lokales Bild nach dem Laden eines Remote-Image fehlgeschlagen

Question

Ist es möglich, ein lokales Image zu laden, wenn das Remote-Image fehlgeschlagen ist?

Zum Beispiel habe ich den folgenden Code:

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

Falls zum Beispiel habe ich nicht die Rechte für den Zugriff http://example.com/my_image.jpg, werde ich einen Fehler in onError bekommen. Gibt es eine Möglichkeit, stattdessen ein lokales Bild zu laden?

Answer 1

Status der Komponente verwenden. In Ihrem Konstruktor gesetzt Anfangs url:

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

erstellen onError Handler:

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

und kombinieren es dann alle zusammen:

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