Wie zeigt man dynamische Bilder im nativen Modus an?

Question

Ich habe dynamische Bilder in meiner app zeigen, Adresse, die Bilder in {item.p2[0].image} das JSON-Objekt, wie unten

/media/profiles/qA94ILU.jpg 
/media/profiles/DSCN3253.JPG 
/media/profiles/DSCN2102_iVPC7S1.JPG 
/media/profiles/DSCN3253.JPG 
/media/profiles/DSCN2204.JPG 

kommen und ich versuche, diese Bilder als

<Image source={{uri: 'http://10.42.0.1:8000{item.p2[0].image}'}} style={{width: 150, height: 100}} /> 

und wenn i angezeigt werden Anzeige es mit direkter Adresse auf Chrom oder wie auf diese Weise source={{uri:'http://10.42.0.1:8000/media/profiles/qA94ILU.jpg'}} dann wird es korrekt angezeigt. Also, wie sollte ich diese Adresse von JSON-Objekt zu einer Variablen nehmen und wie man es anzeigen?

für weitere Informationen

mit diesen versucht, aber nicht

Arbeits

render() { 
    contents = this.state.qwerty.data.map((item) => { 
     add = item.p2[0].image; 
     //console.log(add); 
     return (
      <View key={item.p1.id} style={styles.box}> 
      <Text> 
       {item.p2[0].image} 
      </Text> 
      <Image source={{uri: 'http://10.42.0.1:8000{item.p2[0].image}'}} style={{ width: 150, height: 100}}/> 

      <Image source={{uri: 'http://10.42.0.1:8000{add}'}}style={{ width: 150, height: 100}}/> 
      </View> 
     ); 
    }); 

Answer 1

Sie verwenden falsche Syntax Strings zu kombinieren. Überprüfen Sie Template Literals für weitere Informationen.

Ändern Sie diese

<Image source={{uri: 'http://10.42.0.1:8000{item.p2[0].image}'}} style={{ width: 150, height: 100}}/> 

dieser

<Image source={{uri: `http://10.42.0.1:8000${item.p2[0].image}`}} style={{ width: 150, height: 100}}/> 

oder

<Image source={{uri: 'http://10.42.0.1:8000' + item.p2[0].image}} style={{ width: 150, height: 100}}/>