Standardquelle für Kein Bild?

Question

Ich bekomme gültige uri für die Bildquelle, aber wenn ich Bilder aus der Mediendatei lösche, wird es keine Datei zurückgeben.

Normalerweise überprüfe ich die ungültige URL für das Image, aber dieses Mal konnte das Image-Verzeichnis des Servers das Image nicht rendern.

if(!_.isNil(item.img)) { // This checks if uri is null or string 

Ich habe defaultSource ausprobiert, aber es funktioniert nicht; es zeigt Weiß-Bildschirm für immer

<Image 
     fadeDuration={0} 
     key={item.id} 
     source={{uri: item.img}} 
     style={styles.rowImage} 
     resizeMode="cover" 
     defaultSource={require('../../assets/images/styles.png')} 
     /> 

Wie können wir ein Standardbild platzieren, wenn Image aus früheren gültigen uri nicht existiert?

Dank

Answer 1

können Sie onError verwenden zu handhaben, wenn Ihr uri nicht existiert. Verwenden Sie dann setNativeProps, um Ihr Bild durch das gewünschte Bild zu ersetzen.

Beispiel

Verwendung lokaler Pfad:

import resolveAssetSource from 'resolveAssetSource'; 

... 

handleErr(item){ 

    var imgsrc = require('imagePathHere'); 

    this.refs[`testimage-${item}`].setNativeProps({ 
     src: [resolveAssetSource(imgsrc)] //use source for ios instead of src 
    }); 

} 

... 

<Image 
     //ref="testimage" 
     ref={`testimage-${item.id}`} 
     fadeDuration={0} 
     key={item.id} 
     source={{uri: item.img}} 
     style={styles.rowImage} 
     resizeMode="cover" 
     defaultSource={require('../../assets/images/styles.png')} 
     onError={() => this.handleErr(item.id)} 
     /> 

Nutzen von url:

handleErr(item){ 

    var imgsrc = 'http://blahblah.com/tes.jpg'; 

    this.refs[`testimage-${item}`].setNativeProps({ 
     src: [{uri: imgsrc}] //use source for ios instead of src 
    }); 

} 

... 

<Image 
     //ref="testimage" 
     ref={`testimage-${item.id}`} 
     fadeDuration={0} 
     key={item.id} 
     source={{uri: item.img}} 
     style={styles.rowImage} 
     resizeMode="cover" 
     defaultSource={require('../../assets/images/styles.png')} 
     onError={() => this.handleErr(item.id)} 
     />